Improve: separate style file

configs/webpack/common.js

@@ -6,7 +6,13 @@ const HtmlWebpackPlugin = require('html-webpack-plugin')
 
 module.exports = {
     resolve: {
-        extensions: ['.ts', '.tsx', '.js', '.jsx'],
+        extensions: ['.ts', '.tsx', '.js', '.jsx', '.scss'],
+        plugins: [
+            new TsConfigPathsPlugin()
+        ],
+        alias: {
+            '@styles': resolve(__dirname, 'src/styles/')
+        },
     },
     context: resolve(__dirname, '../../src'),
     module: {
@@ -53,10 +59,4 @@ module.exports = {
     performance: {
         hints: false,
     },
-    resolve: {
-        extensions: ['.jsx', '.js', '.tsx', '.ts'],
-        plugins: [
-            new TsConfigPathsPlugin()
-        ]
-    },
 }

src/containers/Sidebar/style.scss

@@ -1,12 +1,11 @@
-$color: #d8dee2;
+@import '~@styles/variables';
-$active-color: #57befc;
-$active-color-right: #2c8af8;
 
 .slidebar {
     display: flex;
     flex-direction: column;
     align-items: center;
     width: 120px;
+    background: #fff;
 }
 
 .slidebar-logo {
@@ -37,13 +36,14 @@ $active-color-right: #2c8af8;
         > a,
         a:active,
         a:visited {
-            color: $color;
+            color: $color-gray;
             text-decoration: none;
         }
 
         > a.active {
-            background: linear-gradient(to right, $active-color, $active-color-right);
+            background: linear-gradient(to right, $color-primary, $color-primary-dark);
             color: #fff;
+            box-shadow: 0 2px 8px rgba($color: $color-primary-dark, $alpha: 0.5);
         }
     }
 }

src/styles/common.scss

@@ -0,0 +1,25 @@
+@import 'variables';
+
+// styles initial
+html {
+    box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+    margin: 0;
+    padding: 0;
+    box-sizing: inherit;
+}
+
+body {
+    margin: 0;
+    padding: 0;
+}
+
+.app {
+    display: flex;
+    min-height: 100vh;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}

src/styles/variables.scss

@@ -0,0 +1,19 @@
+/**
+ * Clash Dashboard
+ * Style Common Variables
+ */
+
+// primary colors
+$color-primary: #57befc;
+$color-primary-dark: #2c8af8;
+$color-primary-darken: #54759a;
+$color-primary-light: #7fcae4;
+$color-primary-lightly: #b4ddf5;
+
+// common colors
+$color-gray: #d8dee2;
+$color-gray-dark: #b7c5d6;
+$color-gray-darken: #909399;
+$color-green: #67c23a;
+$color-orange: #e6a23c;
+$color-red: #f56c6c;

src/views/App.scss

@@ -1,22 +1 @@
-html {
+@import '~@styles/common';
-    box-sizing: border-box;
-}
-
-*,
-*::before,
-*::after {
-    margin: 0;
-    padding: 0;
-    box-sizing: inherit;
-}
-
-body {
-    margin: 0;
-    padding: 0;
-}
-
-.app {
-    display: flex;
-    min-height: 100vh;
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-}

tsconfig.json

@@ -24,7 +24,9 @@
             "@i18n": ["src/i18n"],
             "@i18n/*": ["src/i18n/*"],
             "@stores": ["src/stores"],
-            "@stores/*": ["src/stores/*"]
+            "@stores/*": ["src/stores/*"],
+            "@styles": ["src/styles"],
+            "@styles/*": ["src/styles/*"]
         }
     },
     "include": [