如何配置Element-Plus主题颜色

1.配色方案：

主色：表现出网站的整体色系

辅助色：除了主色外的其他场景

其他色：文本色；标题色；边框色；背景色

可在https://www.peisebiao.com/网站中挑选

2.安装scss

在 Node.js 项目中安装 Sass 预处理器的命令。npm i sass-D    完整：npm install sass -D

【1】npm i sass-D中的 i 为 install的简写，表示安装一个或者多个包

【2】sass是要安装的npm包的名称。

【3】-D是一个标志，在npm中将sass包作为项目的开发依赖项来安装

3.准备定制样式文件

        例如:

                $xtxColor:#27ba9b;

                $helpColor:#e26237;

                $sucColor:#1dc779;

                $warnColor:#ffb302;

                $priceColor:#cf4444;

4.覆盖ElementPlus样式

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      //配置elementPlus采用sass样式配色
      resolvers: [ElementPlusResolver({importStyle:"sass"})],
    }),
  ],
  css:{
    preprocessorOptions:{    //导入样式表
      scss:{
        //自动导入定制化样式文件进行样式覆盖
        additionalData:`
          @use "@/styles/element/index.scss";
          @use "@/styles/var.scss" as *;
          `,
      }
    }
  },

5.测试：