ElementPlus主题色定制（scss变量替换方案）

如何定制（scss变量替换方案）

1、安装 scss

npm i sass -D

2、准备定制样式文件

src/styles/element/index.scss

// index.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
    )
  )
);

3、对 ElementPlus 样式进行覆盖

3.1 配置 ElementPlus 采用 sass 样式配色系统

// vite.config.js
export default defineConfig({
    plugins: [
        // ...
        Components({
            resolvers: [ElementPlusResolver({importStyle: "sass"})],
        })
    ],
})

3.2 自动导入定制化样式文件进行样式覆盖

// vite.config.js
export default defineConfig({
    // ...
    css: {
        preprocessorOptions: {
            scss: {
                additionalData: `
                @use "@/styles/element/index.scss" as *;
                `
            }
        }
    }
})