必须用@forward+@use：Element Plus SCSS变量系统基于Sass Modules重构，$colors等变量以嵌套map结构组织并带!default声明；@import已被官方弃用，会导致覆盖失效或编译错误，正确做法是先@forward原始var.scss并with覆盖值，再@use index.scss as *，且需配置插件importStyle: 'sass'确保走源码编译。
自定义 SCSS 变量必须用 @forward + @use，不能用 @import
Element Plus 的 SCSS 变量系统基于 Sass Modules 重构，所有变量都通过 map.deep-merge 组织，且声明时带 !default。但旧式 @import 会导致变量重复注入、覆盖失效甚至编译报错。官方已明确弃用 @import，Dart Sass 3.0 将彻底移除它。
正确做法是：在自定义文件（如 src/assets/styles/element/index.scss）中先用 @forward 转发原始变量文件，并用 with 注入你的覆盖值；再用 @use 引入组件样式源码：
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
$colors: (
'primary': ('base': #169BFA),
'success': ('base': #31CF9A),
),
$font-size-base: 14px,
$border-radius-base: 6px
);
@use 'element-plus/theme-chalk/src/index.scss' as *;
- 必须把
@forward放在最前面，否则变量未生效就进入样式编译 -
@use后面要加as *才能导出所有混合宏和变量供后续使用 - 不要在多个地方重复
@use 'element-plus/...'，否则 Sass 会报 “duplicate module”
按需导入时必须配 importStyle: 'sass'
如果你用了 unplugin-vue-components 或 unplugin-auto-import 做按需加载，默认行为是导入编译好的 dist/index.css —— 那是静态 CSS，你的 SCSS 变量根本没参与编译，改了也白改。
关键修复点在 Vite 插件配置里，强制走源码路径：
立即学习“前端免费学习笔记（深入）”；
Components({
resolvers: [
ElementPlusResolver({
importStyle: 'sass' // ← 必须设为 'sass'
})
]
})
- 同样地，
AutoImport中的ElementPlusResolver也要加这个参数 - 如果还用了
unplugin-element-plus，需开启useSource: true - 不配这个，哪怕 SCSS 文件写得再对，主题色也永远是默认的
#409eff
入口样式文件引入顺序不能错
项目最终只应有一个入口 SCSS 文件（比如 src/assets/styles/index.scss），它负责串联所有定制逻辑。这里最容易踩的坑是：在它里面又去 @use 了 element-plus/dist/index.css 或其他预编译 CSS。
正确链路是单向的：
// src/assets/styles/index.scss @use './element/index.scss' as *; // ← 你的变量覆盖 + 组件样式源码 @use './reset.scss'; // ← 其他重置样式（可选）
- 然后在
main.js中只 import 这一个文件：import '@/assets/styles/index.scss' - 绝对不要同时 import
element-plus的 JS 和它的dist/index.css，会造成样式冲突 - Vite 的
css.preprocessorOptions.scss.additionalData不建议在这里注入变量，容易引发模块循环
颜色等 map 类型变量必须按结构嵌套写
Element Plus 的 $colors 不是扁平对象，而是嵌套 map：'primary': ('base': #xxx)。直接写 $--color-primary: #xxx 是无效的 —— 那是旧版 Element UI 的写法，Element Plus 已废弃该命名。
常见变量结构示例：
$colors: (
'primary': ('base': #169BFA),
'warning': ('base': #FFBC33)
);
$text-color: (
'primary': #303133,
'regular': #606266
);
$border-color: (
'base': #DCDFE6
);
- 修改圆角、字体大小等标量变量（如
$border-radius-base）可直接赋值 - 所有 map 类型变量（
$colors、$text-color、$border-color）必须保持 key/value 结构一致，否则编译会静默失败或部分不生效 - 不确定某个变量是否存在或结构？直接查
node_modules/element-plus/theme-chalk/src/common/var.scss
真正卡住人的从来不是“怎么写变量”，而是变量写了却没进编译流水线 —— 每一层（SCSS 写法、插件配置、入口引入）都得对上，漏一环，主题就回退成蓝色。
