From 1c690cc7908303ea7de9f97ec518867641c80ba9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=83=9D=E5=85=88=E7=91=9E?= <1490493387@qq.com>
Date: Sun, 20 Feb 2022 23:53:29 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0scss=E5=8F=98?=
 =?UTF-8?q?=E9=87=8F=E5=85=A8=E5=B1=80=E5=AF=BC=E5=87=BA=E7=9A=84vite?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/styles/element-variables.scss | 26 ++++++++++++++++++++++++++
 vite.config.ts                    | 15 +++++++++++----
 2 files changed, 37 insertions(+), 4 deletions(-)
 create mode 100644 src/styles/element-variables.scss

diff --git a/src/styles/element-variables.scss b/src/styles/element-variables.scss
new file mode 100644
index 00000000..4779894d
--- /dev/null
+++ b/src/styles/element-variables.scss
@@ -0,0 +1,26 @@
+/**
+* I think element-ui's default theme color is too light for long-term use.
+* So I modified the default color and you can modify it to your liking.
+**/
+
+/* theme color */
+$--color-primary: #1890ff;
+$--color-success: #13ce66;
+$--color-warning: #ffba00;
+$--color-danger: #ff4949;
+// $--color-info: #1E1E1E;
+
+$--button-font-weight: 400;
+
+// $--color-text-regular: #1f2d3d;
+
+$--border-color-light: #dfe4ed;
+$--border-color-lighter: #e6ebf5;
+
+$--table-border: 1px solid #dfe6ec;
+
+// the :export directive is the magic sauce for webpack
+// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
+:export {
+  theme: $--color-primary;
+}
diff --git a/vite.config.ts b/vite.config.ts
index e7c17144..7b53a642 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -35,16 +35,23 @@ export default ({command, mode}: ConfigEnv): UserConfig => {
                     }
                 }
             },
-
             resolve: {
-                // Vite2设置别名路径方式一
+                // Vite 设置别名路径
                 alias: {
                     "@": path.resolve("./src"),  // 相对路径别名配置，@表示src
                 }
+            },
+            // SCSS 变量导出
+            // @see https://www.vitejs.net/config/#css-preprocessoroptions
+            css: {
+                preprocessorOptions: {
+                    scss: {
+                        additionalData:  `@import "./src/styles/element-variables.scss";`,
+                        javascriptEnabled: true
+                    }
+                }
             }
         }
-
-
     )
 }