[踩坑] Element Plus 自定义主题不生效

适用于

Vite + Element Plus 配置了自动导入

解决

1. 在一个定义 SCSS 变量的文件之类的文件中，例如 src/assets/style/_vars.scss：

$color-primary: #27ae60;
$color-error: #fa4a4a;

// 自定义 element-plus 主题色
@forward "element-plus/theme-chalk/src/common/var.scss" with (
    $colors: (
        "primary": (
            "base": $color-primary,
        ),
        "error": (
            "base": $color-error,
        ),
        // ... 更多
    )
);

2. vite.config.ts 中：

export default defineConfig({
    // ...
    plugins: [
        // ...
        Components({
            // ...
            resolvers: [
                ElementPlusResolver({ 
                    // 这里配置导入组件 sass 文件
                    importStyle: "sass" 
                })
            ],
        }),
    css: {
        preprocessorOptions: {
            scss: {
                // 这里导入定义变量的文件
                additionalData: '@use "./src/assets/style/_vars.scss" as *;',
            },
        },
    },
});