问题的核心在于，element-plus/dist/index.css 已经把 --el-color-primary 预先写死成了 #409eff。浏览器实际读取的是这个固定颜色值，而不是 CSS 变量本身。想彻底解决 Element Plus 主题定制中 CSS 变量不生效的问题，就需要移除这份 CSS 引入，改为使用 SCSS 源码编译，并确保通过 @use 注入的自定义变量优先加载。
真正的原因通常不是变量名称写错，也不是 :root 配置失效，而是 element-plus/dist/index.css 在构建阶段就已经把 --el-color-primary 编译成了 #409eff，并直接写入样式规则。这样一来，浏览器只会读取最终的十六进制颜色值，根本不会再去引用 :root 中定义的变量内容。
为什么删了 import 'element-plus/dist/index.css' 还是没变？
很多开发者在排查 Element Plus 主题不生效时，只删除了入口文件中的引入，但实际问题往往还藏在其他配置里：
- 检查
vite.config.ts里的css.preprocessorOptions.scss.additionalData是否存在重复注入变量的情况，否则可能导致你的自定义主题被覆盖，或者出现 SCSS 解析顺序异常 - 确认
unplugin-element-plus插件是否开启了useSource: true；如果没有开启，默认仍会走dist目录下的 CSS，从而直接绕过你的 SCSS 编译流程 - 如果项目使用按需引入插件，像
unplugin-vue-components和unplugin-auto-import中各自的ElementPlusResolver都必须分别设置importStyle: 'sass'，只要漏掉一个，主题变量配置基本就不会按预期生效
为什么 DevTools 里看到 --el-color-primary 但按钮还是蓝色？
这通常说明变量虽然已经声明成功，但并没有真正参与组件的最终渲染计算。排查方式可以按下面步骤进行：
- 打开 DevTools → Elements → 选中一个
background-color - 如果看到的结果是
rgb(64, 158, 255)或#409eff，而不是var(--el-color-primary)，就说明当前样式规则根本没有引用 CSS 变量 - 这时继续查看该按钮在 Styles 面板中的
background-color来源，若样式来自theme-chalk/index.css，基本可以确认你仍然被编译后的 CSS 固定值锁住了
哪些组件的 CSS 变量注定不生效？
需要注意的是，Element Plus 并不是所有组件样式都完全迁移到了运行时 CSS 变量体系中。以下几类场景里，单纯修改变量往往不会生效，还需要额外处理：
el-sub-menu的子菜单背景色、箭头图标颜色：部分样式依赖 SCSS 编译阶段计算，var()无法直接影响伪元素样式或 SVG 的fill- 暗色模式场景下，如果没有在
.dark :root中显式重新定义变量，例如--el-color-primary，那么深色主题上下文里可能依旧使用浅色模式的旧值 el-date-picker面板头部、el-select-dropdown的高亮区域等位置：内部仍混用了部分硬编码颜色值，通常需要通过::v-deep或局部 SCSS 进行覆盖
最容易被忽视的一点是：CSS 变量声明成功，并不等于所有 Element Plus 组件都会自动响应主题变化。有些组件样式链路本身就绕开了变量系统，因此必须由开发者手动补充覆盖方案，而不能简单认为“改了 :root 就一定全部生效”。
