Element Plus SCSS变量覆盖与Vite自动导入实践
在基于 Vite + Vue 3 的项目中使用 Element Plus 时，定制主题色最常见的方式是通过 SCSS 变量覆盖。Element Plus 的组件样式基于 SCSS 构建，官方保留了底层变量入口，我们可以利用 Sass 的 @forward ... with 将自定义变量注入到主题包中，再配合 unplugin-auto-import / unplugin-vue-components 的 sass importStyle，在自动导入组件的同时应用自定义配色。1. 安装 Sass 依赖
由于 Element Plus 的 SCSS 变量覆盖依赖 sass 模块系统，需要先安装 sass。如果项目使用 pnpm，命令如下：
pnpm i sass -D
2. 创建变量覆盖样式文件
新建 element-plus-vars.scss，在文件最前面使用 @forward 覆盖 Element Plus 主题变量。这里以主色、状态色和页面背景色为例：
// 覆盖变量
@forward "element-plus/theme-chalk/src/common/var.scss" with (
$colors: (
"primary": (
"base": #4080ff,
),
"success": (
"base": #23c343,
),
"warning": (
"base": #ff9a2e,
),
"danger": (
"base": #f76560,
),
"info": (
"base": #a9aeb8,
),
),
$bg-color: (
"page": #f5f8fd,
)
);
需要注意的是，@forward 必须在 @use 之前执行。变量覆盖完成后，再引入 Element Plus 的完整样式入口。按照官方模块规则，可以在同一文件中随后加入：
@use "element-plus/theme-chalk/src/index.scss";
3. 建立组件样式统一入口
实际项目中，建议单独创建一个 element-plus.scss，作为 Element Plus 组件样式覆盖的集中文件，并在该文件中先引入上面写好的变量覆盖文件，再引入 Element Plus 样式，保证覆盖顺序正确：
/**
* element-plus 组件样式覆盖
*/
// 变量覆盖(必须在最前面)
@use "./element-plus-vars";
// 引入 Element Plus 样式（必须在覆盖变量后）
@use "element-plus/theme-chalk/src/index.scss";
如果你还有其他全局样式，比如 reset.scss，可以再建一个入口文件 index.scss，按顺序组织：
// 重置样式
@use "./reset";
// element-plus
@use "./element-plus";
4. 在入口文件中导入样式
在 Vite 项目的 main.js 中引入上面的样式入口文件即可，确保它在组件注册逻辑加载前被处理：
// 样式导入
import "@/assets/styles/index.scss";
5. 配置 Vite 自动导入组件并启用 Sass 样式
通过 unplugin-auto-import 和 unplugin-vue-components 可以避免手动 import Element Plus 组件。关键点在于给 ElementPlusResolver 传入 importStyle: "sass"，让组件按需加载时使用 sass 版本样式，从而读取前面覆盖过的 SCSS 变量。
文件 vite.config.js 中相关的配置如下：
// 自动导入
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default {
plugins: [
vue(),
// 自动导入 Element Plus 组件和函数，无需手动 import
AutoImport({
resolvers: ,
}),
// 自动注册 Element Plus 组件，可在模板中直接使用，采用 sass 样式配色
Components({
resolvers: ,
}),
],
}
完成以上配置后，Element Plus 的组件主题色就会覆盖为变量中定义的色值，同时保留按需自动导入的能力。整个方案的核心是把变量覆盖文件放在所有组件样式之前，并且让 Vite 插件按 sass 方式拉取组件样式，否则 SCSS 变量无法传入，定制不会生效。
这种写法的适用场景是：Vue 3 + Vite + Element Plus 项目需要统一品牌色、调整 primary/status 颜色，或修改页面背景色等。需要注意的是，覆盖文件中的变量结构要与 Element Plus 的 var.scss 定义保持一致，特别是 $colors 下每个状态色需要包含 base 字段。后续要调整其他深度变量，也可以继续在 with 块中追加对应项，比如圆角、尺寸或阴影变量均可以在同一个 @forward 中覆盖。
Re: Element Plus SCSS变量覆盖与Vite自动导入实践
这个实践总结得很清晰，正好解决了最近我在项目里遇到的痛点。之前用 Element Plus 改主题时总是绕不开完整引入样式，按需自动导入后自定义颜色又失效，原来关键是要给 `ElementPlusResolver` 传 `importStyle: "sass"`，让组件样式走 SCSS 变量通道。感谢楼主把 `@forward ... with` 和 Vite 插件配置串起来讲，对照着操作一遍就通了，尤其是变量覆盖文件必须放在所有样式最前面的提醒非常实用。Re: Element Plus SCSS变量覆盖与Vite自动导入实践
感谢分享！这篇实践总结得很清晰，尤其是把 `@forward ... with` 放在 `@use` 之前的细节点出来了，很多人第一次搞 SCSS 变量覆盖就是栽在这个顺序上。 想补充一个自己踩过的小坑：如果项目里之前已经通过 `importStyle: 'css'` 或者手动 `import 'element-plus/dist/index.css'` 引入过样式，需要把那些旧入口删掉，否则两套样式同时存在，自定义变量会被默认样式覆盖掉，排查起来容易懵。 另外 `unplugin-auto-import` 那侧默认也会处理 ElMessage 这类函数的样式，如果这类组件也依赖主题变量，可能也需要给 `AutoImport` 的 resolver 同样传 `importStyle: 'sass'`，只配 `Components` 那侧有时候不够。不确定楼主实际项目里有没有遇到这个情况？Re: Element Plus SCSS变量覆盖与Vite自动导入实践
楼主的实践路径很清晰，尤其是强调“@forward 必须在 @use 之前”这个顺序坑，很多人第一次搞 SCSS 变量覆盖时容易栽在这里。用 `importStyle: "sass"` 让按需导入也走 SCSS 变量，这个思路确实关键——如果默认拉 css，覆盖就会被冲掉。 我补充一个可能遇到的小细节：如果项目里同时用了暗黑模式，或者后续想改圆角、阴影等 token，还是把 `element-plus-vars.scss` 当成一个统一入口维护比较舒服。另外如果你用的 Vite 版本较新，记得检查 `css.preprocessorOptions.scss` 里是否也需要配 `additionalData` 来全局注入某些混合宏，不过只是覆盖主题变量的话，楼主这套已经够稳了。 整体很实用，适合需要统一品牌色又不想放弃按需加载的团队。收藏了慢慢试。
页:
[1]