diff --git a/src/components/bars/PlayerBar/styles.module.scss b/src/components/bars/PlayerBar/styles.module.scss
index fb1af0ef..0e24521b 100644
--- a/src/components/bars/PlayerBar/styles.module.scss
+++ b/src/components/bars/PlayerBar/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .place {
   position: relative;
   height: $bar_height;
diff --git a/src/components/bars/SubmitBar/styles.module.scss b/src/components/bars/SubmitBar/styles.module.scss
index 83b9ce01..7220b81d 100644
--- a/src/components/bars/SubmitBar/styles.module.scss
+++ b/src/components/bars/SubmitBar/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   position: absolute;
   right: -($bar_height + $gap);
diff --git a/src/components/boris/BorisStatsBackend/styles.module.scss b/src/components/boris/BorisStatsBackend/styles.module.scss
index 1d3912e8..073813f8 100644
--- a/src/components/boris/BorisStatsBackend/styles.module.scss
+++ b/src/components/boris/BorisStatsBackend/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   ul {
     font: $font_12_regular;
diff --git a/src/components/boris/BorisStatsGit/styles.module.scss b/src/components/boris/BorisStatsGit/styles.module.scss
index f46c72f4..f518ecc3 100644
--- a/src/components/boris/BorisStatsGit/styles.module.scss
+++ b/src/components/boris/BorisStatsGit/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .stats {
   &__title {
     font: $font_12_semibold;
diff --git a/src/components/boris/BorisStatsGitCard/styles.module.scss b/src/components/boris/BorisStatsGitCard/styles.module.scss
index c1d94c51..37bd0b23 100644
--- a/src/components/boris/BorisStatsGitCard/styles.module.scss
+++ b/src/components/boris/BorisStatsGitCard/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   padding: $gap / 2 0;
   border-bottom: 1px solid #333333;
diff --git a/src/components/comment/CommentEmbedBlock/styles.module.scss b/src/components/comment/CommentEmbedBlock/styles.module.scss
index 56c0e880..fe34a541 100644
--- a/src/components/comment/CommentEmbedBlock/styles.module.scss
+++ b/src/components/comment/CommentEmbedBlock/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .embed {
   padding: 0 $gap;
   height: $comment_height;
diff --git a/src/components/comment/CommentTextBlock/styles.module.scss b/src/components/comment/CommentTextBlock/styles.module.scss
index caab6c62..86b9a599 100644
--- a/src/components/comment/CommentTextBlock/styles.module.scss
+++ b/src/components/comment/CommentTextBlock/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .text {
   padding: 0 $gap;
   font-weight: 300;
diff --git a/src/components/containers/BlurWrapper/styles.module.scss b/src/components/containers/BlurWrapper/styles.module.scss
index fd537904..3c2143c9 100644
--- a/src/components/containers/BlurWrapper/styles.module.scss
+++ b/src/components/containers/BlurWrapper/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .blur {
   padding-top: $header_height + 2px;
   display: flex;
diff --git a/src/components/containers/Card/styles.module.scss b/src/components/containers/Card/styles.module.scss
index 50459030..73ebccac 100644
--- a/src/components/containers/Card/styles.module.scss
+++ b/src/components/containers/Card/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .card {
   background-color: $card_bg;
   border-radius: $panel_radius;
diff --git a/src/components/containers/CellGrid/index.tsx b/src/components/containers/CellGrid/index.tsx
index e712bb76..a8924be7 100644
--- a/src/components/containers/CellGrid/index.tsx
+++ b/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;
diff --git a/src/components/containers/CellGrid/styles.module.scss b/src/components/containers/CellGrid/styles.module.scss
index 0d7999a8..4f689baf 100644
--- a/src/components/containers/CellGrid/styles.module.scss
+++ b/src/components/containers/CellGrid/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .grid {
   display: grid;
   grid-auto-rows: 1fr;
diff --git a/src/components/containers/CommentWrapper/styles.module.scss b/src/components/containers/CommentWrapper/styles.module.scss
index d056d269..c1f36ae5 100644
--- a/src/components/containers/CommentWrapper/styles.module.scss
+++ b/src/components/containers/CommentWrapper/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   background: $comment_bg;
   min-height: $comment_height;
diff --git a/src/components/containers/CoverBackdrop/styles.module.scss b/src/components/containers/CoverBackdrop/styles.module.scss
index 093c310a..c0055449 100644
--- a/src/components/containers/CoverBackdrop/styles.module.scss
+++ b/src/components/containers/CoverBackdrop/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .cover {
   position: absolute;
   width: 100%;
diff --git a/src/components/containers/Filler/styles.module.scss b/src/components/containers/Filler/styles.module.scss
index 599ffb33..6ad79c31 100644
--- a/src/components/containers/Filler/styles.module.scss
+++ b/src/components/containers/Filler/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .filler {
   flex: 1;
 }
diff --git a/src/components/containers/Grid/styles.module.scss b/src/components/containers/Grid/styles.module.scss
index a47fa7e3..7c7c18ba 100644
--- a/src/components/containers/Grid/styles.module.scss
+++ b/src/components/containers/Grid/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .grid {
   display: grid;
   grid-template-columns: 1fr;
diff --git a/src/components/containers/Group/styles.module.scss b/src/components/containers/Group/styles.module.scss
index 2590e46b..9ea373ad 100644
--- a/src/components/containers/Group/styles.module.scss
+++ b/src/components/containers/Group/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .group {
   display: flex;
   flex: 1;
diff --git a/src/components/containers/InfiniteScroll/styles.module.scss b/src/components/containers/InfiniteScroll/styles.module.scss
index 9fd1a252..051e75bc 100644
--- a/src/components/containers/InfiniteScroll/styles.module.scss
+++ b/src/components/containers/InfiniteScroll/styles.module.scss
@@ -1,2 +1,4 @@
+@import "src/styles/variables";
+
 .more {
 }
diff --git a/src/components/containers/Padder/index.tsx b/src/components/containers/Padder/index.tsx
index da9547f4..7c0ae4c4 100644
--- a/src/components/containers/Padder/index.tsx
+++ b/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;
diff --git a/src/components/containers/Padder/styles.module.scss b/src/components/containers/Padder/styles.module.scss
index 91ed76e3..20e00cdb 100644
--- a/src/components/containers/Padder/styles.module.scss
+++ b/src/components/containers/Padder/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .padder {
   padding: $gap;
 
diff --git a/src/components/containers/PageCover/styles.module.scss b/src/components/containers/PageCover/styles.module.scss
index 92f9c352..a521869c 100644
--- a/src/components/containers/PageCover/styles.module.scss
+++ b/src/components/containers/PageCover/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 @keyframes fadeIn {
   0% {
     opacity: 0;
diff --git a/src/components/containers/Panel/index.tsx b/src/components/containers/Panel/index.tsx
index 356cbe6c..c6d369d2 100644
--- a/src/components/containers/Panel/index.tsx
+++ b/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;
diff --git a/src/components/containers/Panel/styles.module.scss b/src/components/containers/Panel/styles.module.scss
index 76c67e3a..1d3443a3 100644
--- a/src/components/containers/Panel/styles.module.scss
+++ b/src/components/containers/Panel/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .panel {
   padding: $gap;
   min-height: $input_height + $gap;
diff --git a/src/components/containers/Scroll/styles.module.scss b/src/components/containers/Scroll/styles.module.scss
index a8989f7a..16f92eec 100644
--- a/src/components/containers/Scroll/styles.module.scss
+++ b/src/components/containers/Scroll/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .container {
   min-height: 50px;
 }
diff --git a/src/components/containers/Sticky/styles.module.scss b/src/components/containers/Sticky/styles.module.scss
index 8bca8106..eb680535 100644
--- a/src/components/containers/Sticky/styles.module.scss
+++ b/src/components/containers/Sticky/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   height: 100%;
   width: 100%;
diff --git a/src/components/containers/TagField/styles.module.scss b/src/components/containers/TagField/styles.module.scss
index 18edac3e..4f090f10 100644
--- a/src/components/containers/TagField/styles.module.scss
+++ b/src/components/containers/TagField/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   display: flex;
   align-items: flex-start;
diff --git a/src/components/dialogs/DialogTitle/styles.module.scss b/src/components/dialogs/DialogTitle/styles.module.scss
index 02307e03..d3ff1b3c 100644
--- a/src/components/dialogs/DialogTitle/styles.module.scss
+++ b/src/components/dialogs/DialogTitle/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .title {
   margin: $gap 0 $gap * 4 !important;
   text-transform: uppercase;
diff --git a/src/components/editors/AudioEditor/styles.module.scss b/src/components/editors/AudioEditor/styles.module.scss
index c32787d8..68850a77 100644
--- a/src/components/editors/AudioEditor/styles.module.scss
+++ b/src/components/editors/AudioEditor/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   padding-bottom: $upload_button_height + $gap;
   min-height: 200px;
diff --git a/src/components/editors/AudioGrid/styles.module.scss b/src/components/editors/AudioGrid/styles.module.scss
index 7ab40804..9713beb5 100644
--- a/src/components/editors/AudioGrid/styles.module.scss
+++ b/src/components/editors/AudioGrid/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .helper {
   opacity: 0.5;
   z-index: 10 !important;
diff --git a/src/components/editors/EditorPanel/styles.module.scss b/src/components/editors/EditorPanel/styles.module.scss
index 0c3178d2..a58338b2 100644
--- a/src/components/editors/EditorPanel/styles.module.scss
+++ b/src/components/editors/EditorPanel/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .panel {
   height: 72px;
   position: absolute;
diff --git a/src/components/editors/EditorUploadButton/styles.module.scss b/src/components/editors/EditorUploadButton/styles.module.scss
index c793e1c6..3ba89ad9 100644
--- a/src/components/editors/EditorUploadButton/styles.module.scss
+++ b/src/components/editors/EditorUploadButton/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   @include outer_shadow();
 
diff --git a/src/components/editors/EditorUploadCoverButton/styles.module.scss b/src/components/editors/EditorUploadCoverButton/styles.module.scss
index 18237537..c006c7b3 100644
--- a/src/components/editors/EditorUploadCoverButton/styles.module.scss
+++ b/src/components/editors/EditorUploadCoverButton/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   @include outer_shadow();
 
diff --git a/src/components/editors/ImageEditor/styles.module.scss b/src/components/editors/ImageEditor/styles.module.scss
index e5bcef09..10286e1a 100644
--- a/src/components/editors/ImageEditor/styles.module.scss
+++ b/src/components/editors/ImageEditor/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   min-height: 200px;
   padding-bottom: $upload_button_height + $gap;
diff --git a/src/components/editors/ImageGrid/styles.module.scss b/src/components/editors/ImageGrid/styles.module.scss
index 7ab40804..9713beb5 100644
--- a/src/components/editors/ImageGrid/styles.module.scss
+++ b/src/components/editors/ImageGrid/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .helper {
   opacity: 0.5;
   z-index: 10 !important;
diff --git a/src/components/editors/SortableAudioGrid/styles.module.scss b/src/components/editors/SortableAudioGrid/styles.module.scss
index 21bee87b..c7ad5874 100644
--- a/src/components/editors/SortableAudioGrid/styles.module.scss
+++ b/src/components/editors/SortableAudioGrid/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .grid {
   box-sizing: border-box;
 
diff --git a/src/components/editors/SortableAudioGridItem/styles.module.scss b/src/components/editors/SortableAudioGridItem/styles.module.scss
index 81fd01cb..c1158a71 100644
--- a/src/components/editors/SortableAudioGridItem/styles.module.scss
+++ b/src/components/editors/SortableAudioGridItem/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .item {
   z-index: 1;
   box-sizing: border-box;
diff --git a/src/components/editors/SortableImageGrid/styles.module.scss b/src/components/editors/SortableImageGrid/styles.module.scss
index cbd34386..d3c37c41 100644
--- a/src/components/editors/SortableImageGrid/styles.module.scss
+++ b/src/components/editors/SortableImageGrid/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .grid {
   box-sizing: border-box;
 
diff --git a/src/components/editors/SortableImageGridItem/styles.module.scss b/src/components/editors/SortableImageGridItem/styles.module.scss
index 81fd01cb..c1158a71 100644
--- a/src/components/editors/SortableImageGridItem/styles.module.scss
+++ b/src/components/editors/SortableImageGridItem/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .item {
   z-index: 1;
   box-sizing: border-box;
diff --git a/src/components/editors/TextEditor/styles.module.scss b/src/components/editors/TextEditor/styles.module.scss
index 86245f67..f4f3b75c 100644
--- a/src/components/editors/TextEditor/styles.module.scss
+++ b/src/components/editors/TextEditor/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   & > div {
     padding-bottom: 64px;
diff --git a/src/components/editors/VideoEditor/styles.module.scss b/src/components/editors/VideoEditor/styles.module.scss
index 35d1bc58..d81bc274 100644
--- a/src/components/editors/VideoEditor/styles.module.scss
+++ b/src/components/editors/VideoEditor/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .preview {
   padding-top: 56.25%;
   position: relative;
diff --git a/src/components/flow/Cell/styles.module.scss b/src/components/flow/Cell/styles.module.scss
index 72a6ed00..2a4092e4 100644
--- a/src/components/flow/Cell/styles.module.scss
+++ b/src/components/flow/Cell/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .cell {
   padding: $gap / 4;
   box-sizing: border-box;
diff --git a/src/components/flow/FlowHero/styles.module.scss b/src/components/flow/FlowHero/styles.module.scss
index 62a8500f..4e9eae70 100644
--- a/src/components/flow/FlowHero/styles.module.scss
+++ b/src/components/flow/FlowHero/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   width: 100%;
   height: 100%;
diff --git a/src/components/flow/FlowRecentItem/styles.module.scss b/src/components/flow/FlowRecentItem/styles.module.scss
index 42381a98..a666028f 100644
--- a/src/components/flow/FlowRecentItem/styles.module.scss
+++ b/src/components/flow/FlowRecentItem/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .item {
   display: flex;
   align-items: center;
diff --git a/src/components/flow/FlowSearchResults/styles.module.scss b/src/components/flow/FlowSearchResults/styles.module.scss
index 7c88908e..5433988d 100644
--- a/src/components/flow/FlowSearchResults/styles.module.scss
+++ b/src/components/flow/FlowSearchResults/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   flex: 1;
   overflow: auto;
diff --git a/src/components/flow/FlowStamp/styles.module.scss b/src/components/flow/FlowStamp/styles.module.scss
index 0ca5216d..4927c8f9 100644
--- a/src/components/flow/FlowStamp/styles.module.scss
+++ b/src/components/flow/FlowStamp/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   display: flex;
   flex-direction: column;
diff --git a/src/components/flow/HeroPlaceholder/style.scss b/src/components/flow/HeroPlaceholder/style.scss
index 9d180bb9..e020bcec 100644
--- a/src/components/flow/HeroPlaceholder/style.scss
+++ b/src/components/flow/HeroPlaceholder/style.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .container {
   height: 280px;
   width: 100%;
diff --git a/src/components/input/ArcProgress/styles.module.scss b/src/components/input/ArcProgress/styles.module.scss
index 7f216069..55b8e214 100644
--- a/src/components/input/ArcProgress/styles.module.scss
+++ b/src/components/input/ArcProgress/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .icon {
   fill: $red;
   stroke: none;
diff --git a/src/components/input/Button/styles.module.scss b/src/components/input/Button/styles.module.scss
index a11ca2b4..a2fd301e 100644
--- a/src/components/input/Button/styles.module.scss
+++ b/src/components/input/Button/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 @keyframes pulse {
   0% {
     opacity: 1;
diff --git a/src/components/input/ButtonGroup/styles.module.scss b/src/components/input/ButtonGroup/styles.module.scss
index fdfb5568..3ecdc404 100644
--- a/src/components/input/ButtonGroup/styles.module.scss
+++ b/src/components/input/ButtonGroup/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   display: flex;
   flex-direction: row;
diff --git a/src/components/input/Info/index.tsx b/src/components/input/Info/index.tsx
index 7c848f31..8f6eee15 100644
--- a/src/components/input/Info/index.tsx
+++ b/src/components/input/Info/index.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import classNames = require('classnames');
+import classNames from 'classnames';
 
 const style = require('./style.scss');
 
diff --git a/src/components/input/Info/style.scss b/src/components/input/Info/style.scss
index f58aec2d..52c4d7f4 100644
--- a/src/components/input/Info/style.scss
+++ b/src/components/input/Info/style.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .container {
   min-height: $info_height;
   border-radius: $input_radius;
diff --git a/src/components/input/LoaderCircle/styles.module.scss b/src/components/input/LoaderCircle/styles.module.scss
index 1c4bb8d4..ff660f9c 100644
--- a/src/components/input/LoaderCircle/styles.module.scss
+++ b/src/components/input/LoaderCircle/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .icon {
   fill: transparentize(black, 0.6);
   stroke: none;
diff --git a/src/components/input/TextInput/styles.module.scss b/src/components/input/TextInput/styles.module.scss
index 55324332..cddf3233 100644
--- a/src/components/input/TextInput/styles.module.scss
+++ b/src/components/input/TextInput/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrapper {
   height: $input_height;
   display: flex;
diff --git a/src/components/main/Footer/styles.module.scss b/src/components/main/Footer/styles.module.scss
index 1fbf1779..f0b19c41 100644
--- a/src/components/main/Footer/styles.module.scss
+++ b/src/components/main/Footer/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .footer {
   display: flex;
   flex-direction: row;
diff --git a/src/components/main/Header/index.tsx b/src/components/main/Header/index.tsx
index baec90ec..84d7ca92 100644
--- a/src/components/main/Header/index.tsx
+++ b/src/components/main/Header/index.tsx
@@ -16,7 +16,7 @@ import { URLS } from '~/constants/urls';
 import { createPortal } from 'react-dom';
 import classNames from 'classnames';
 
-import * as style from './style.scss';
+import styles from './styles.module.scss';
 import * as MODAL_ACTIONS from '~/redux/modal/actions';
 import * as AUTH_ACTIONS from '~/redux/auth/actions';
 import { IState } from '~/redux/store';
@@ -75,24 +75,24 @@ const HeaderUnconnected: FC<IProps> = memo(
     );
 
     return createPortal(
-      <div className={classNames(style.wrap, { [style.is_scrolled]: is_scrolled })}>
-        <div className={style.container}>
+      <div className={classNames(styles.wrap, { [styles.is_scrolled]: is_scrolled })}>
+        <div className={styles.container}>
           <Logo />
 
           <Filler />
 
-          <div className={style.plugs}>
+          <div className={styles.plugs}>
             <Link
-              className={classNames(style.item, { [style.is_active]: pathname === URLS.BASE })}
+              className={classNames(styles.item, { [styles.is_active]: pathname === URLS.BASE })}
               to={URLS.BASE}
             >
               ФЛОУ
             </Link>
 
             <Link
-              className={classNames(style.item, {
-                [style.is_active]: pathname === URLS.BORIS,
-                [style.has_dot]: hasBorisUpdates,
+              className={classNames(styles.item, {
+                [styles.is_active]: pathname === URLS.BORIS,
+                [styles.has_dot]: hasBorisUpdates,
               })}
               to={URLS.BORIS}
             >
@@ -100,7 +100,7 @@ const HeaderUnconnected: FC<IProps> = memo(
             </Link>
 
             {is_user && (
-              <div className={style.item}>
+              <div className={styles.item}>
                 <Notifications />
               </div>
             )}
@@ -111,7 +111,7 @@ const HeaderUnconnected: FC<IProps> = memo(
           )}
 
           {!is_user && (
-            <Group horizontal className={style.user_button} onClick={onLogin}>
+            <Group horizontal className={styles.user_button} onClick={onLogin}>
               <div>ВДОХ</div>
             </Group>
           )}
diff --git a/src/components/main/Header/style.scss b/src/components/main/Header/styles.module.scss
similarity index 98%
rename from src/components/main/Header/style.scss
rename to src/components/main/Header/styles.module.scss
index 45e99be5..b783c3a9 100644
--- a/src/components/main/Header/style.scss
+++ b/src/components/main/Header/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   height: $header_height;
   z-index: 25;
diff --git a/src/components/main/Logo/index.tsx b/src/components/main/Logo/index.tsx
index 639ba981..bf91d9b3 100644
--- a/src/components/main/Logo/index.tsx
+++ b/src/components/main/Logo/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './style.scss';
+import styles from './styles.module.scss';
 import { Link } from 'react-router-dom';
 
 export const Logo = () => (
diff --git a/src/components/main/Logo/style.scss b/src/components/main/Logo/styles.module.scss
similarity index 77%
rename from src/components/main/Logo/style.scss
rename to src/components/main/Logo/styles.module.scss
index 06a02399..7f0f28fa 100644
--- a/src/components/main/Logo/style.scss
+++ b/src/components/main/Logo/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .logo {
   font: $font_24_bold;
   display: flex;
diff --git a/src/components/main/Notifications/styles.module.scss b/src/components/main/Notifications/styles.module.scss
index 6e0ae869..cf110f0a 100644
--- a/src/components/main/Notifications/styles.module.scss
+++ b/src/components/main/Notifications/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 @keyframes ring {
   0% {
     transform: rotate(-10deg);
diff --git a/src/components/main/SidePane/styles.module.scss b/src/components/main/SidePane/styles.module.scss
index 5cc3cf10..94e1de69 100644
--- a/src/components/main/SidePane/styles.module.scss
+++ b/src/components/main/SidePane/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .pane {
   width: 54px;
   height: 100%;
diff --git a/src/components/main/UserButton/styles.module.scss b/src/components/main/UserButton/styles.module.scss
index 9ba7fd16..cd71d92f 100644
--- a/src/components/main/UserButton/styles.module.scss
+++ b/src/components/main/UserButton/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   position: relative;
   z-index: 2;
diff --git a/src/components/media/AudioPlayer/styles.module.scss b/src/components/media/AudioPlayer/styles.module.scss
index eab2ee3e..65c38efe 100644
--- a/src/components/media/AudioPlayer/styles.module.scss
+++ b/src/components/media/AudioPlayer/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   display: flex;
   flex-direction: row;
diff --git a/src/components/node/CommendDeleted/styles.module.scss b/src/components/node/CommendDeleted/styles.module.scss
index 5240ffac..fb910494 100644
--- a/src/components/node/CommendDeleted/styles.module.scss
+++ b/src/components/node/CommendDeleted/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   display: flex;
   align-items: center;
diff --git a/src/components/node/Comment/styles.module.scss b/src/components/node/Comment/styles.module.scss
index c56bbe59..efc60a22 100644
--- a/src/components/node/Comment/styles.module.scss
+++ b/src/components/node/Comment/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 @keyframes appear {
   from {
     opacity: 0;
diff --git a/src/components/node/CommentContent/styles.module.scss b/src/components/node/CommentContent/styles.module.scss
index e0806050..cb02f44f 100644
--- a/src/components/node/CommentContent/styles.module.scss
+++ b/src/components/node/CommentContent/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 @import 'flexbin/flexbin.scss';
 
 .wrap {
diff --git a/src/components/node/CommentForm/styles.module.scss b/src/components/node/CommentForm/styles.module.scss
index 75248544..5d691822 100644
--- a/src/components/node/CommentForm/styles.module.scss
+++ b/src/components/node/CommentForm/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   display: flex;
   flex-direction: column;
diff --git a/src/components/node/CommentMenu/styles.module.scss b/src/components/node/CommentMenu/styles.module.scss
index 7ac03845..8c5686cf 100644
--- a/src/components/node/CommentMenu/styles.module.scss
+++ b/src/components/node/CommentMenu/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   position: absolute;
   right: 0;
diff --git a/src/components/node/ImageSwitcher/styles.module.scss b/src/components/node/ImageSwitcher/styles.module.scss
index 4fb81734..b1e64a6e 100644
--- a/src/components/node/ImageSwitcher/styles.module.scss
+++ b/src/components/node/ImageSwitcher/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   width: 100%;
   height: 0;
diff --git a/src/components/node/MenuButton/styles.module.scss b/src/components/node/MenuButton/styles.module.scss
index 2c781d91..e7fa57dc 100644
--- a/src/components/node/MenuButton/styles.module.scss
+++ b/src/components/node/MenuButton/styles.module.scss
@@ -1,3 +1,4 @@
+@import "src/styles/variables";
 
 .button {
   fill: white;
diff --git a/src/components/node/NodeAudioBlock/styles.module.scss b/src/components/node/NodeAudioBlock/styles.module.scss
index 5df8c201..0d83ab51 100644
--- a/src/components/node/NodeAudioBlock/styles.module.scss
+++ b/src/components/node/NodeAudioBlock/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   background: $content_bg;
   border-radius: $radius;
diff --git a/src/components/node/NodeAudioImageBlock/styles.module.scss b/src/components/node/NodeAudioImageBlock/styles.module.scss
index 34c81e8a..434d4bce 100644
--- a/src/components/node/NodeAudioImageBlock/styles.module.scss
+++ b/src/components/node/NodeAudioImageBlock/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   @include outer_shadow();
   padding-bottom: 33vh;
diff --git a/src/components/node/NodeComments/styles.module.scss b/src/components/node/NodeComments/styles.module.scss
index e36f2422..33fc89a5 100644
--- a/src/components/node/NodeComments/styles.module.scss
+++ b/src/components/node/NodeComments/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   & > div {
     margin: 0 0 $gap 0;
diff --git a/src/components/node/NodeDeletedBadge/styles.module.scss b/src/components/node/NodeDeletedBadge/styles.module.scss
index 96c5ad3a..a5038b5a 100644
--- a/src/components/node/NodeDeletedBadge/styles.module.scss
+++ b/src/components/node/NodeDeletedBadge/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .badge {
   padding: $gap;
   text-align: center;
diff --git a/src/components/node/NodeImageBlock/styles.module.scss b/src/components/node/NodeImageBlock/styles.module.scss
index a9529f4d..7cd09f4a 100644
--- a/src/components/node/NodeImageBlock/styles.module.scss
+++ b/src/components/node/NodeImageBlock/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   padding-bottom: $gap * 2;
 
diff --git a/src/components/node/NodeImageBlockPlaceholder/styles.module.scss b/src/components/node/NodeImageBlockPlaceholder/styles.module.scss
index d02bb460..3219165a 100644
--- a/src/components/node/NodeImageBlockPlaceholder/styles.module.scss
+++ b/src/components/node/NodeImageBlockPlaceholder/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .placeholder {
   height: 320px;
   background: transparentize(black, 0.8);
diff --git a/src/components/node/NodeImageSlideBlock/styles.module.scss b/src/components/node/NodeImageSlideBlock/styles.module.scss
index c1d00973..4ebc0118 100644
--- a/src/components/node/NodeImageSlideBlock/styles.module.scss
+++ b/src/components/node/NodeImageSlideBlock/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   position: relative;
 }
diff --git a/src/components/node/NodeNoComments/styles.module.scss b/src/components/node/NodeNoComments/styles.module.scss
index d22d1fc0..d70bf976 100644
--- a/src/components/node/NodeNoComments/styles.module.scss
+++ b/src/components/node/NodeNoComments/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   user-select: none;
   overflow: hidden;
diff --git a/src/components/node/NodePanel/styles.module.scss b/src/components/node/NodePanel/styles.module.scss
index 6b4e79dc..9447eaec 100644
--- a/src/components/node/NodePanel/styles.module.scss
+++ b/src/components/node/NodePanel/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .place {
   // height: 72px;
   position: relative;
diff --git a/src/components/node/NodePanelInner/styles.module.scss b/src/components/node/NodePanelInner/styles.module.scss
index bf515eff..58d925fa 100644
--- a/src/components/node/NodePanelInner/styles.module.scss
+++ b/src/components/node/NodePanelInner/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 @mixin button {
   margin: 0 $gap;
   cursor: pointer;
diff --git a/src/components/node/NodeRelated/styles.module.scss b/src/components/node/NodeRelated/styles.module.scss
index 2ffd5464..a5d06d58 100644
--- a/src/components/node/NodeRelated/styles.module.scss
+++ b/src/components/node/NodeRelated/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   // padding: $gap;
   //background: transparentize(black, 0.8);
diff --git a/src/components/node/NodeRelatedItem/styles.module.scss b/src/components/node/NodeRelatedItem/styles.module.scss
index 61a861cc..694d76ab 100644
--- a/src/components/node/NodeRelatedItem/styles.module.scss
+++ b/src/components/node/NodeRelatedItem/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .item {
   background: lighten($content_bg, 2%) 50% 50% no-repeat;
   padding-bottom: 100%;
diff --git a/src/components/node/NodeTextBlock/styles.module.scss b/src/components/node/NodeTextBlock/styles.module.scss
index 9acebdf6..a14eb0e9 100644
--- a/src/components/node/NodeTextBlock/styles.module.scss
+++ b/src/components/node/NodeTextBlock/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .text {
   @include outer_shadow();
 
diff --git a/src/components/node/NodeVideoBlock/styles.module.scss b/src/components/node/NodeVideoBlock/styles.module.scss
index d6c742c6..0f37c590 100644
--- a/src/components/node/NodeVideoBlock/styles.module.scss
+++ b/src/components/node/NodeVideoBlock/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   padding-bottom: 56.25%;
   position: relative;
diff --git a/src/components/notifications/NotificationBubble/styles.module.scss b/src/components/notifications/NotificationBubble/styles.module.scss
index 216113be..a3ed40ae 100644
--- a/src/components/notifications/NotificationBubble/styles.module.scss
+++ b/src/components/notifications/NotificationBubble/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 $notification_color: darken($content_bg, 2%);
 
 @keyframes appear {
diff --git a/src/components/placeholders/ParagraphPlaceholder/styles.module.scss b/src/components/placeholders/ParagraphPlaceholder/styles.module.scss
index e5cc976d..a5373213 100644
--- a/src/components/placeholders/ParagraphPlaceholder/styles.module.scss
+++ b/src/components/placeholders/ParagraphPlaceholder/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .para {
   display: grid;
   grid-template-columns: auto;
diff --git a/src/components/placeholders/Placeholder/styles.module.scss b/src/components/placeholders/Placeholder/styles.module.scss
index 1c7782d8..83a97bd0 100644
--- a/src/components/placeholders/Placeholder/styles.module.scss
+++ b/src/components/placeholders/Placeholder/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .placeholder {
   height: 1em;
   width: 120px;
diff --git a/src/components/profile/Message/styles.module.scss b/src/components/profile/Message/styles.module.scss
index 1f20ef35..4f11e976 100644
--- a/src/components/profile/Message/styles.module.scss
+++ b/src/components/profile/Message/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 $incoming_color: transparentize($wisegreen, 0.7);
 $outgoing_color: $comment_bg;
 
diff --git a/src/components/profile/MessageForm/styles.module.scss b/src/components/profile/MessageForm/styles.module.scss
index 7f935dbf..e0c10819 100644
--- a/src/components/profile/MessageForm/styles.module.scss
+++ b/src/components/profile/MessageForm/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   @include outer_shadow();
   padding: $gap;
diff --git a/src/components/profile/ProfileAccounts/styles.module.scss b/src/components/profile/ProfileAccounts/styles.module.scss
index f8f0073f..e04711f9 100644
--- a/src/components/profile/ProfileAccounts/styles.module.scss
+++ b/src/components/profile/ProfileAccounts/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
 }
 
diff --git a/src/components/profile/ProfileAccountsError/styles.module.scss b/src/components/profile/ProfileAccountsError/styles.module.scss
index c36a67a5..1fb48718 100644
--- a/src/components/profile/ProfileAccountsError/styles.module.scss
+++ b/src/components/profile/ProfileAccountsError/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   position: absolute;
   top: 0;
diff --git a/src/components/profile/ProfileDescription/styles.module.scss b/src/components/profile/ProfileDescription/styles.module.scss
index ef27a6d1..3c1a63d0 100644
--- a/src/components/profile/ProfileDescription/styles.module.scss
+++ b/src/components/profile/ProfileDescription/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .content {
   padding: $gap * 2;
   min-height: 200px;
diff --git a/src/components/profile/ProfileSettings/styles.module.scss b/src/components/profile/ProfileSettings/styles.module.scss
index 03139f25..001ad541 100644
--- a/src/components/profile/ProfileSettings/styles.module.scss
+++ b/src/components/profile/ProfileSettings/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 $pad_danger: mix($red, $content_bg, 70%);
 $pad_usual: mix(white, $content_bg, 10%);
 
diff --git a/src/components/sidebar/TagSidebarList/styles.module.scss b/src/components/sidebar/TagSidebarList/styles.module.scss
index 868192b4..755c1c8e 100644
--- a/src/components/sidebar/TagSidebarList/styles.module.scss
+++ b/src/components/sidebar/TagSidebarList/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .list {
   flex: 1;
   flex-direction: column;
diff --git a/src/components/tags/TagAutocomplete/styles.module.scss b/src/components/tags/TagAutocomplete/styles.module.scss
index ec6baaef..bcdd817c 100644
--- a/src/components/tags/TagAutocomplete/styles.module.scss
+++ b/src/components/tags/TagAutocomplete/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 @keyframes appear {
   0% { opacity: 0 }
   100% { opacity: 100 }
diff --git a/src/components/tags/TagAutocompleteRow/styles.module.scss b/src/components/tags/TagAutocompleteRow/styles.module.scss
index 51efd1b3..25ff562f 100644
--- a/src/components/tags/TagAutocompleteRow/styles.module.scss
+++ b/src/components/tags/TagAutocompleteRow/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 $row_height: 24px;
 
 .row {
diff --git a/src/components/tags/TagInput/styles.module.scss b/src/components/tags/TagInput/styles.module.scss
index c5ef4d75..9daa272c 100644
--- a/src/components/tags/TagInput/styles.module.scss
+++ b/src/components/tags/TagInput/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   position: relative;
   z-index: 20;
diff --git a/src/components/tags/TagWrapper/styles.module.scss b/src/components/tags/TagWrapper/styles.module.scss
index a16a6358..65fdccc0 100644
--- a/src/components/tags/TagWrapper/styles.module.scss
+++ b/src/components/tags/TagWrapper/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 $big: 1.2;
 
 .tag {
diff --git a/src/components/upload/AudioUpload/styles.module.scss b/src/components/upload/AudioUpload/styles.module.scss
index 17882875..87ffdf1a 100644
--- a/src/components/upload/AudioUpload/styles.module.scss
+++ b/src/components/upload/AudioUpload/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   background: lighten($content_bg, 4%);
   // padding-bottom: 100%;
diff --git a/src/components/upload/ImageUpload/styles.module.scss b/src/components/upload/ImageUpload/styles.module.scss
index f8f6baf6..922f6254 100644
--- a/src/components/upload/ImageUpload/styles.module.scss
+++ b/src/components/upload/ImageUpload/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   background: lighten($content_bg, 4%);
   padding-bottom: 100%;
diff --git a/src/containers/dialogs/BetterScrollDialog/styles.module.scss b/src/containers/dialogs/BetterScrollDialog/styles.module.scss
index d73f7aad..fb653af5 100644
--- a/src/containers/dialogs/BetterScrollDialog/styles.module.scss
+++ b/src/containers/dialogs/BetterScrollDialog/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   width: 100vw;
   height: 100vh;
diff --git a/src/containers/dialogs/EditorDialog/styles.module.scss b/src/containers/dialogs/EditorDialog/styles.module.scss
index 5d672dd5..e1d63133 100644
--- a/src/containers/dialogs/EditorDialog/styles.module.scss
+++ b/src/containers/dialogs/EditorDialog/styles.module.scss
@@ -1,7 +1,9 @@
+@import "src/styles/variables";
+
 .editor {
   flex: 1;
   padding: $gap;
-  // padding-bottom: 0;    
+  // padding-bottom: 0;
   align-items: center;
   justify-content: center;
   position: relative;
@@ -10,4 +12,4 @@
 .form {
   height: 100vh;
   width: 100%;
-}
\ No newline at end of file
+}
diff --git a/src/containers/dialogs/LoadingDialog/styles.module.scss b/src/containers/dialogs/LoadingDialog/styles.module.scss
index b0eb90de..e20b0920 100644
--- a/src/containers/dialogs/LoadingDialog/styles.module.scss
+++ b/src/containers/dialogs/LoadingDialog/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   height: 200px;
   display: flex;
diff --git a/src/containers/dialogs/LoginDialog/styles.module.scss b/src/containers/dialogs/LoginDialog/styles.module.scss
index 773b2921..0260b90a 100644
--- a/src/containers/dialogs/LoginDialog/styles.module.scss
+++ b/src/containers/dialogs/LoginDialog/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 $secondary_color: darken(desaturate($blue, 100%), 30%);
 $vk_color: $secondary_color;
 
diff --git a/src/containers/dialogs/LoginDialogButtons/styles.module.scss b/src/containers/dialogs/LoginDialogButtons/styles.module.scss
index ee2a09fc..80e5de4c 100644
--- a/src/containers/dialogs/LoginDialogButtons/styles.module.scss
+++ b/src/containers/dialogs/LoginDialogButtons/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .footer {
   padding: $gap;
 }
diff --git a/src/containers/dialogs/LoginSocialRegisterButtons/styles.module.scss b/src/containers/dialogs/LoginSocialRegisterButtons/styles.module.scss
index 4dd8a181..f980872c 100644
--- a/src/containers/dialogs/LoginSocialRegisterButtons/styles.module.scss
+++ b/src/containers/dialogs/LoginSocialRegisterButtons/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   padding: $gap $gap * 2;
 
diff --git a/src/containers/dialogs/LoginSocialRegisterDialog/styles.module.scss b/src/containers/dialogs/LoginSocialRegisterDialog/styles.module.scss
index b67b43e1..9e25e606 100644
--- a/src/containers/dialogs/LoginSocialRegisterDialog/styles.module.scss
+++ b/src/containers/dialogs/LoginSocialRegisterDialog/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   padding: $login_dialog_padding;
 }
diff --git a/src/containers/dialogs/Modal/styles.module.scss b/src/containers/dialogs/Modal/styles.module.scss
index 41d1b253..cdf1aa9a 100644
--- a/src/containers/dialogs/Modal/styles.module.scss
+++ b/src/containers/dialogs/Modal/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .fixed {
   position: fixed;
   z-index: 30;
diff --git a/src/containers/dialogs/PhotoSwipe/styles.module.scss b/src/containers/dialogs/PhotoSwipe/styles.module.scss
index 2180cb9f..8a6d6c8b 100644
--- a/src/containers/dialogs/PhotoSwipe/styles.module.scss
+++ b/src/containers/dialogs/PhotoSwipe/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   :global(.pswp__img) {
     border-radius: $radius;
diff --git a/src/containers/dialogs/ProfileDialog/styles.module.scss b/src/containers/dialogs/ProfileDialog/styles.module.scss
index 12fb0688..f6f47e1d 100644
--- a/src/containers/dialogs/ProfileDialog/styles.module.scss
+++ b/src/containers/dialogs/ProfileDialog/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .messages {
   padding: $gap;
 }
diff --git a/src/containers/dialogs/RestorePasswordDialog/styles.module.scss b/src/containers/dialogs/RestorePasswordDialog/styles.module.scss
index 9c952724..0d7548db 100644
--- a/src/containers/dialogs/RestorePasswordDialog/styles.module.scss
+++ b/src/containers/dialogs/RestorePasswordDialog/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   padding: $gap $gap $gap * 4;
 }
diff --git a/src/containers/dialogs/RestoreRequestDialog/styles.module.scss b/src/containers/dialogs/RestoreRequestDialog/styles.module.scss
index 246337f9..fd8a6251 100644
--- a/src/containers/dialogs/RestoreRequestDialog/styles.module.scss
+++ b/src/containers/dialogs/RestoreRequestDialog/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   padding: $gap $gap $gap * 4;
 }
diff --git a/src/containers/dialogs/ScrollDialog/styles.module.scss b/src/containers/dialogs/ScrollDialog/styles.module.scss
index 0d0b1856..fed7926f 100644
--- a/src/containers/dialogs/ScrollDialog/styles.module.scss
+++ b/src/containers/dialogs/ScrollDialog/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .container {
   height: 100vh;
   width: 100%;
diff --git a/src/containers/dialogs/TestDialog/styles.module.scss b/src/containers/dialogs/TestDialog/styles.module.scss
index 33096725..f56e4964 100644
--- a/src/containers/dialogs/TestDialog/styles.module.scss
+++ b/src/containers/dialogs/TestDialog/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .example {
   height: 1200px;
   background: yellow;
diff --git a/src/containers/flow/FlowLayout/styles.module.scss b/src/containers/flow/FlowLayout/styles.module.scss
index 24835389..9dc8a2d8 100644
--- a/src/containers/flow/FlowLayout/styles.module.scss
+++ b/src/containers/flow/FlowLayout/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   max-width: 2000px;
   padding: 0 40px 40px 40px;
diff --git a/src/containers/main/BottomContainer/styles.module.scss b/src/containers/main/BottomContainer/styles.module.scss
index 9e5ae555..0e9c40d0 100644
--- a/src/containers/main/BottomContainer/styles.module.scss
+++ b/src/containers/main/BottomContainer/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   position: fixed;
   transform: translateZ(0);
diff --git a/src/containers/main/MainLayout/styles.module.scss b/src/containers/main/MainLayout/styles.module.scss
index 9e49d8f1..e87b6e31 100644
--- a/src/containers/main/MainLayout/styles.module.scss
+++ b/src/containers/main/MainLayout/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrapper {
   width: 100%;
   padding: 0 $gap;
diff --git a/src/containers/node/BorisLayout/styles.module.scss b/src/containers/node/BorisLayout/styles.module.scss
index 367baee0..57795659 100644
--- a/src/containers/node/BorisLayout/styles.module.scss
+++ b/src/containers/node/BorisLayout/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   display: flex;
   align-items: flex-start;
diff --git a/src/containers/node/NodeLayout/styles.module.scss b/src/containers/node/NodeLayout/styles.module.scss
index 6549945c..f799e1a4 100644
--- a/src/containers/node/NodeLayout/styles.module.scss
+++ b/src/containers/node/NodeLayout/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .content {
   align-items: stretch !important;
   @include vertical_at_tablet;
@@ -25,7 +27,7 @@
   min-width: 0;
   position: relative;
   z-index: 10;
-  
+
   @media (max-width: 1024px) {
     padding-left: 0;
     padding-top: $comment_height / 2;
diff --git a/src/containers/pages/ErrorNotFound/styles.module.scss b/src/containers/pages/ErrorNotFound/styles.module.scss
index 32005eec..515e62cb 100644
--- a/src/containers/pages/ErrorNotFound/styles.module.scss
+++ b/src/containers/pages/ErrorNotFound/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   @include outer_shadow();
 
diff --git a/src/containers/profile/ProfileAvatar/styles.module.scss b/src/containers/profile/ProfileAvatar/styles.module.scss
index 615a0ec6..bb3b6741 100644
--- a/src/containers/profile/ProfileAvatar/styles.module.scss
+++ b/src/containers/profile/ProfileAvatar/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .avatar {
   @include outer_shadow();
 
diff --git a/src/containers/profile/ProfileInfo/styles.module.scss b/src/containers/profile/ProfileInfo/styles.module.scss
index ea0be792..abbee948 100644
--- a/src/containers/profile/ProfileInfo/styles.module.scss
+++ b/src/containers/profile/ProfileInfo/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   justify-content: flex-start;
   align-items: flex-start !important;
diff --git a/src/containers/profile/ProfileLayout/styles.module.scss b/src/containers/profile/ProfileLayout/styles.module.scss
index 072539f9..d3af1279 100644
--- a/src/containers/profile/ProfileLayout/styles.module.scss
+++ b/src/containers/profile/ProfileLayout/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   display: flex;
   align-items: flex-start !important;
diff --git a/src/containers/profile/ProfileLoader/styles.module.scss b/src/containers/profile/ProfileLoader/styles.module.scss
index f8c83816..9062a886 100644
--- a/src/containers/profile/ProfileLoader/styles.module.scss
+++ b/src/containers/profile/ProfileLoader/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .loader {
   min-height: 33vh;
   display: flex;
diff --git a/src/containers/profile/ProfileMessages/styles.module.scss b/src/containers/profile/ProfileMessages/styles.module.scss
index 45f4072f..99b29daa 100644
--- a/src/containers/profile/ProfileMessages/styles.module.scss
+++ b/src/containers/profile/ProfileMessages/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .messages {
   padding: $gap;
   background: $node_bg;
diff --git a/src/containers/profile/ProfilePage/styles.module.scss b/src/containers/profile/ProfilePage/styles.module.scss
index 22c2ef76..65016399 100644
--- a/src/containers/profile/ProfilePage/styles.module.scss
+++ b/src/containers/profile/ProfilePage/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   flex: 1;
   background: $content_bg;
diff --git a/src/containers/profile/ProfilePageLeft/styles.module.scss b/src/containers/profile/ProfilePageLeft/styles.module.scss
index 0d150b01..94b59f8a 100644
--- a/src/containers/profile/ProfilePageLeft/styles.module.scss
+++ b/src/containers/profile/ProfilePageLeft/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   display: flex;
   align-items: stretch;
diff --git a/src/containers/profile/ProfileTabs/styles.module.scss b/src/containers/profile/ProfileTabs/styles.module.scss
index f48a48e4..29f68b7b 100644
--- a/src/containers/profile/ProfileTabs/styles.module.scss
+++ b/src/containers/profile/ProfileTabs/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   display: flex;
   align-items: flex-start;
diff --git a/src/containers/sidebars/SidebarWrapper/styles.module.scss b/src/containers/sidebars/SidebarWrapper/styles.module.scss
index dda5cc05..467f5bbe 100644
--- a/src/containers/sidebars/SidebarWrapper/styles.module.scss
+++ b/src/containers/sidebars/SidebarWrapper/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 @keyframes appear {
   0% { opacity: 0; }
   100% { opacity: 1; }
diff --git a/src/containers/sidebars/TagSidebar/styles.module.scss b/src/containers/sidebars/TagSidebar/styles.module.scss
index 9038443b..dbc48cf4 100644
--- a/src/containers/sidebars/TagSidebar/styles.module.scss
+++ b/src/containers/sidebars/TagSidebar/styles.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   @include outer_shadow;
 
diff --git a/src/styles/common/inputs.module.scss b/src/styles/common/inputs.module.scss
index 477b7cb4..99016f58 100644
--- a/src/styles/common/inputs.module.scss
+++ b/src/styles/common/inputs.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .input_text_wrapper {
   position: relative;
   min-height: 40px;
diff --git a/src/utils/node.ts b/src/utils/node.ts
index 286b3fe2..59b0aa3e 100644
--- a/src/utils/node.ts
+++ b/src/utils/node.ts
@@ -1,5 +1,5 @@
 import { USER_ROLES } from '~/redux/auth/constants';
-import { INode, IComment, ICommentGroup } from '~/redux/types';
+import { ICommentGroup, INode } from '~/redux/types';
 import { IUser } from '~/redux/auth/types';
 import path from 'ramda/es/path';
 import { NODE_TYPES } from '~/redux/node/constants';