element ui-plus 主题色修改

jsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "baseUrl": "./",
     "paths": {
       "@/*": ["./src/*"]
     }

package-lock.json

@@ -20,6 +20,7 @@
         "eslint": "^8.57.0",
         "eslint-plugin-vue": "^9.23.0",
         "prettier": "^3.2.5",
+        "sass": "^1.77.8",
         "unplugin-auto-import": "^0.18.2",
         "unplugin-vue-components": "^0.27.3",
         "vite": "^5.3.1"
@@ -1916,6 +1917,12 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immutable": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmmirror.com/immutable/-/immutable-4.3.7.tgz",
+      "integrity": "sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==",
+      "dev": true
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmmirror.com/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -2633,6 +2640,23 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/sass": {
+      "version": "1.77.8",
+      "resolved": "https://registry.npmmirror.com/sass/-/sass-1.77.8.tgz",
+      "integrity": "sha512-4UHg6prsrycW20fqLGPShtEvo/WyHRVRHwOP4DzkUrObWoWI05QBSfzU71TVB7PFaL104TwNaHpjlWXAZbQiNQ==",
+      "dev": true,
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/scule": {
       "version": "1.3.0",
       "resolved": "https://registry.npmmirror.com/scule/-/scule-1.3.0.tgz",

package.json

@@ -23,6 +23,7 @@
     "eslint": "^8.57.0",
     "eslint-plugin-vue": "^9.23.0",
     "prettier": "^3.2.5",
+    "sass": "^1.77.8",
     "unplugin-auto-import": "^0.18.2",
     "unplugin-vue-components": "^0.27.3",
     "vite": "^5.3.1"

src/styles/element/index.scss

@@ -0,0 +1,20 @@
+/* 只需要重写你需要的即可 */
+@forward 'element-plus/theme-chalk/src/common/var.scss' with (
+      $colors: (
+        'primary': ( // 主色
+            'base': #27ba9b,
+        ),
+        'success': ( // 成功色
+            'base': #1dc779,
+        ),
+        'warning': ( // 警告色
+            'base': #ffb302,
+        ),
+        'danger': ( // 危险色
+            'base': #e26237,
+        ),
+        'error': ( // 错误色
+            'base': #cf4444,
+        ),
+      )
+    );

vite.config.js

@@ -14,12 +14,24 @@ export default defineConfig({
       resolvers: [ElementPlusResolver()]
     }),
     Components({
-      resolvers: [ElementPlusResolver()]
+      resolvers: [ElementPlusResolver(
+        {
+          importStyle: 'sass'
+        }
+      )]
     })
   ],
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))
     }
+  },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        additionalData: `@use "@/styles/element/index.scss" as *;`
       }
+    }
+
+  },
 })