fixed styles imports

src/components/containers/BlurWrapper/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .blur {
   padding-top: $header_height + 2px;
   display: flex;

src/components/containers/Card/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .card {
   background-color: $card_bg;
   border-radius: $panel_radius;

src/components/containers/CellGrid/index.tsx

@@ -1,7 +1,7 @@
 import React, { FC, HTMLAttributes } from 'react';
 import styles from './styles.module.scss';
 
-import classNames = require('classnames');
+import classNames from 'classnames';
 
 type IProps = HTMLAttributes<HTMLDivElement> & {
   children: any;

src/components/containers/CellGrid/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .grid {
   display: grid;
   grid-auto-rows: 1fr;

src/components/containers/CommentWrapper/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   background: $comment_bg;
   min-height: $comment_height;

src/components/containers/CoverBackdrop/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .cover {
   position: absolute;
   width: 100%;

src/components/containers/Filler/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .filler {
   flex: 1;
 }

src/components/containers/Grid/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .grid {
   display: grid;
   grid-template-columns: 1fr;

src/components/containers/Group/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .group {
   display: flex;
   flex: 1;

src/components/containers/InfiniteScroll/styles.module.scss

@@ -1,2 +1,4 @@
+@import "src/styles/variables";
+
 .more {
 }

src/components/containers/Padder/index.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import styles from './styles.module.scss';
 
-import classNames = require('classnames');
+import classNames from 'classnames';
 
 type IProps = React.HTMLAttributes<HTMLDivElement> & {
   padding?: number;

src/components/containers/Padder/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .padder {
   padding: $gap;
 

src/components/containers/PageCover/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 @keyframes fadeIn {
   0% {
     opacity: 0;

src/components/containers/Panel/index.tsx

@@ -1,7 +1,7 @@
 import React, { FC, HTMLAttributes } from 'react';
 import styles from './styles.module.scss';
 
-import classNames = require('classnames');
+import classNames from 'classnames';
 
 type IProps = HTMLAttributes<HTMLDivElement> & {
   seamless?: boolean;

src/components/containers/Panel/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .panel {
   padding: $gap;
   min-height: $input_height + $gap;

src/components/containers/Scroll/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .container {
   min-height: 50px;
 }

src/components/containers/Sticky/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   height: 100%;
   width: 100%;

src/components/containers/TagField/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   display: flex;
   align-items: flex-start;