根本原因是element-plus/dist/index.css已将--el-color-primary硬编码为#409eff，浏览器直接读取十六进制值而非变量；需删除该CSS引入，改用SCSS源码编译并确保@use定制变量优先加载。
为什么 --el-color-primary 设置了却没变色？
根本原因是变量被锁死在编译后的 CSS 里，不是你没写对，而是 element-plus/dist/index.css 已经把 --el-color-primary 解析成 #409eff 并硬编码进样式规则中。浏览器读到的是最终颜色值，根本不会再去查 :root 里的变量定义。
验证方法：打开 DevTools → Elements → 找一个 <el-button> → 右侧 Computed 面板搜 background-color，如果显示的是具体十六进制值（比如 rgb(64, 158, 255)），而不是 var(--el-color-primary)，说明变量根本没参与计算。
- 检查
main.ts或main.js是否还留着import 'element-plus/dist/index.css'—— 必须删掉 - 确认自定义变量文件（如
src/assets/styles/element-theme.scss）是在createApp()之后、app.mount()之前引入的 - 如果用了 Vite，检查
vite.config.ts中css.preprocessorOptions.scss.additionalData是否重复注入了变量，导致冲突或覆盖
@forward + @use 覆盖 SCSS 变量时路径报错怎么办？
报 Can't find stylesheet to import 或找不到 theme-chalk/src/common/var.scss，通常不是路径写错，而是构建链路缺了一环。
Element Plus 的 SCSS 源码路径依赖 sass 包和正确的模块解析能力。只装 sass 不够，还要确保构建工具能识别 @use 语法并正确 resolve 到 node_modules 里的源码目录。
立即学习“前端免费学习笔记（深入）”；
- 执行
npm install sass --save-dev（必须是sass，不是node-sass） - 在
tsconfig.json或jsconfig.json中配好"baseUrl"和"paths"，比如"@/*": ["src/*"]，避免相对路径出错 -
@forward必须放在文件最顶部，且路径要写全：@forward 'element-plus/theme-chalk/src/common/var.scss' with ( ... ) - 不要用
@import—— 它已被 Dart Sass 弃用，会导致变量未覆盖或重复声明错误
按需引入下主题色还是默认蓝，importStyle: 'sass' 配了也没用？
配了但无效，大概率是插件配置没落到所有相关位置。unplugin-vue-components 和 unplugin-auto-import 是两个独立插件，各自 resolver 都要单独设 importStyle: 'sass'，漏一个就白配。
更隐蔽的问题是：如果你同时用了 unplugin-element-plus，它默认走 dist CSS，必须显式开启 useSource: true，否则它会绕过你的 SCSS 编译链直接注入静态样式。
Components({ resolvers: [ElementPlusResolver({ importStyle: 'sass' })] })AutoImport({ resolvers: [ElementPlusResolver({ importStyle: 'sass' })] })-
unplugin-element-plus插件配置里加{ useSource: true } - 确保项目里只有一个入口 SCSS 文件（如
src/assets/styles/index.scss），里面只@use你的定制文件，不再额外@use 'element-plus/...'
哪些组件颜色注定无法靠 CSS 变量统一改？
--el-color-primary 能覆盖大部分按钮、边框、链接，但 Element Plus 内部仍有少量组件使用硬编码色值或 SVG 内联 fill，CSS 变量无法穿透。
典型例子：el-date-picker 面板顶部背景、el-select-dropdown 的高亮条、el-sub-menu 的箭头图标、暗色模式下未显式重设的变量。这些地方不是“忘了适配”，而是设计上就没走变量链。
- 遇到这类情况，先用
::v-deep或局部<style scoped lang="scss">补丁式覆盖，仅作兜底 - 别指望单靠
:root一套变量搞定全部 —— 这是当前版本（2.4+）的客观限制，不是你配置错了 - 真正容易被忽略的是：变量生效 ≠ 组件响应变化。得一个个点开 DevTools 看 computed style，确认目标属性是否真在读取变量
