vue3 vite element-plus自定义主题色

配置

• 安装 scss yarn add sass

• 准备定制化文件

• 在静态资源中创建：@/assets/styles/element.scss

  /* 只需要重写你需要的即可 */
  @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,
        ),
      )
  );

• 配置element-plus自动导入sass配色

在vite.config.ts文件中修改Components

    plugins: [
        vue(),
        AutoImport({
            resolvers: [ElementPlusResolver()],
        }),
        Components({
            resolvers: [ElementPlusResolver(
                {
                    importStyle: "sass",
                }
            )],
        }),
    ],

• 自动导入定制化样式覆盖

css: {
        preprocessorOptions: {
            scss: {
                // 自动导入定制化样式文件进行样式覆盖
                additionalData: `
          @use "@/assets/styles/element.scss" as *;
        `,
            }
        }
    }

修改后的vite.config.ts文件为

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import {fileURLToPath} from 'node:url';
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import {ElementPlusResolver} from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
      vue(),
      AutoImport({
          resolvers: [ElementPlusResolver()],
      }),
      Components({
          resolvers: [ElementPlusResolver(
              {
                  importStyle: "sass",
              }
          )],
      }),
  ],
  resolve: {
      // extensions: [".js", ".jsx", ".ejs", '.mjs'], // 之前忽略了 .mjs
      alias: {
          "@": fileURLToPath(new URL("./src", import.meta.url)),
      },
  },
  css: {
      preprocessorOptions: {
          scss: {
              // 自动导入定制化样式文件进行样式覆盖
              additionalData: `
        @use "@/assets/styles/element.scss" as *;
      `,
          }
      }
  }
})