feat(sass): set global sass variables

Author: lbwa

src/style/theme/index.scss

@@ -0,0 +1,6 @@
+/**
+ * More Detail: https://element.eleme.cn/#/en-US/component/custom-theme#update-scss-variables-in-your-project
+ */
+
+@import './variables.scss';
+@import './mixins.scss';

src/style/theme/mixins.scss

@@ -0,0 +1,23 @@
+@mixin text-dot {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+@mixin normalize-link($s: 14px, $w: 500, $c: rgba(0, 0, 0, 0.85), $h: #1890ff) {
+  font-size: $s;
+  font-weight: $w;
+  color: $c;
+  text-decoration: none;
+
+  &:hover {
+    color: $h;
+  }
+}
+
+@mixin flex-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}

src/style/theme/ui.scss

@@ -0,0 +1,9 @@
+@import './variables.scss';
+
+/* Override theme color variables */
+$--color-primary: $main-light;
+
+/* Reqiured. override icon font path varibale */
+$--font-path: '~element-ui/lib/theme-chalk/fonts';
+
+@import '~element-ui/packages/theme-chalk/src/index';

src/style/theme/variables.scss

@@ -0,0 +1,41 @@
+/**
+ * Import these color variables via sass-loader options
+ * more detail: https://github.com/webpack-contrib/sass-loader#environment-variables
+ */
+
+// main color
+$main-light: #72beff;
+$main-dark: #282c34;
+$main-selected: #49597a;
+$main-hover: #49597a;
+$main-white: #ffffff;
+$main-bg: #ebf0f1;
+
+// sub color
+$sub-yellow: #ffd75c;
+$sub-green: #5adc9c;
+$sub-red: #ff7977;
+$sub-line: #eeeeee;
+$sub-table-bg: #f9fafc;
+$sub-selected: #eff7fc;
+$sub-border: #cccccc;
+
+// font color
+$font-title: #3b4966;
+$font-selected: #72beff;
+$font-1: #333333;
+$font-2: #6d6d6d;
+$font-3: #999999;
+$font-tips: #c0c4cc;
+$font-white: #ffffff;
+$font-warn: #ff7977;
+
+// font size
+$fz-title: 22px;
+$fz-subtitle: 18px;
+$fz-label: $fz-subtitle;
+$fz-subtitle-s: 16px;
+$fz-content: 14px;
+
+// shadow
+$box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);

vue.config.js

@@ -58,6 +58,17 @@ module.exports = {
       // https://webpack.js.org/configuration/optimization/#optimizationruntimechunk
       chainConfig.optimization.runtimeChunk('single')
     })
+  },
+  css: {
+    loaderOptions: {
+      /**
+       * @description Set global sass environment variables
+       * https://github.com/webpack-contrib/sass-loader#environment-variables
+       */
+      sass: {
+        data: `@import "STYLE/theme/index.scss";`
+      }
+    }
   }
 }