根本原因是element-plus/dist/index.css将--el-color-primary硬编码为#409eff，浏览器直接读取该值而非变量；需删除该css引入，改用scss源码编译并确保@use定制变量优先加载。
根本原因不是变量写错了，而是 element-plus/dist/index.css 已把 --el-color-primary 解析成 #409eff 并硬编码进样式规则里——浏览器直接读十六进制值，根本不会去查 :root 里的变量定义。
为什么删了 import 'element-plus/dist/index.css' 还是没变？
常见错误是只删了入口文件的引入，却漏掉了其他地方：
- 检查
vite.config.ts中css.preprocessorOptions.scss.additionalData是否重复注入了变量，导致你的自定义被覆盖或解析异常 - 确认
unplugin-element-plus插件是否启用了useSource: true；默认它走distCSS，会绕过你的 SCSS 编译链 - 按需引入插件（
unplugin-vue-components和unplugin-auto-import）各自的ElementPlusResolver都要单独配importStyle: 'sass'，漏一个就白配
为什么 DevTools 里看到 --el-color-primary 但按钮还是蓝色？
这说明变量已声明，但未参与实际渲染计算。验证方法很直接：
- 打开 DevTools → Elements → 找一个
<el-button></el-button>→ 右侧 Computed 面板搜background-color - 如果显示的是
rgb(64, 158, 255)或#409eff，而不是var(--el-color-primary)，说明样式规则压根没引用变量 - 此时再查该按钮的 Styles 面板，看
background-color来源是不是来自theme-chalk/index.css—— 这意味着你仍被编译后 CSS 锁死
哪些组件的 CSS 变量注定不生效？
Element Plus 并非所有地方都完全迁移到运行时变量体系。以下情况变量无效，必须额外处理：
-
el-sub-menu的子菜单背景、箭头图标颜色：部分依赖 SCSS 编译时计算，var()无法穿透到伪元素或 SVGfill - 暗色模式下未在
.dark :root显式重设变量，比如--el-color-primary在深色上下文里仍是浅色值 -
el-date-picker面板头部、el-select-dropdown的高亮条：内部混用硬编码色值，得用::v-deep或局部 SCSS 覆盖
真正容易被忽略的点是：变量声明成功 ≠ 所有组件响应变化。有些样式路径绕过了变量体系，得靠开发者主动补位，而不是指望“改了 :root 就万事大吉”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
