element plus升级后css变量不生效，根本原因是仍加载了element-plus/dist/index.css，其将--el-color-primary硬编码为#409eff，浏览器直接读取该值而不查:root变量；须删除所有dist引入、确保scss源码编译并优先加载自定义变量，且检查unplugin-element-plus是否启用usesource: true。
Element Plus升级后CSS变量不生效，先看是否还在加载dist/index.css
升级后变量失效，八成是因为旧构建链路残留——element-plus/dist/index.css仍被引入，它把--el-color-primary直接编译成#409eff写死在样式规则里。浏览器读到的是十六进制值，根本不会查:root里的变量定义。
必须做三件事：
- 全局搜索
import 'element-plus/dist/index.css'，包括main.ts、vite.config.ts、甚至插件配置文件，一处都不能留 - 确认自定义变量文件（如
src/assets/styles/element-theme.scss）是在createApp()之后、app.mount()之前引入的 - 如果用了
unplugin-element-plus，检查是否显式设了useSource: true；默认它走dist，会绕过你的SCSS链
DevTools里能看到变量但组件没变色，说明变量没参与计算
打开 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 锁死，不是变量没定义，是根本没用上。
按需引入下importStyle: 'sass'配了还是蓝，检查两个插件是否都配全
unplugin-vue-components和unplugin-auto-import是两个独立插件，各自 resolver 都要单独设importStyle: 'sass'，漏一个就白配。
常见遗漏点：
-
Components({ resolvers: [ElementPlusResolver({ importStyle: 'sass' })] })只配了前者，后者没配 -
AutoImport({ resolvers: [ElementPlusResolver()] })里没传importStyle参数 - 用了
unplugin-element-plus但没开useSource: true，它默认注入dist样式，覆盖你的 SCSS
暗色模式、子菜单、日期面板这些地方变量注定不生效
Element Plus 并非所有组件都完全迁移到运行时变量体系。以下情况 CSS 变量无效，必须额外处理：
-
el-sub-menu的子菜单背景、箭头图标颜色：部分依赖 SCSS 编译时计算，var()无法穿透到伪元素或 SVGfill - 暗色模式下未在
.dark :root里重设--el-color-primary，深色上下文里仍是浅色值 -
el-date-picker面板头部、el-select-dropdown的高亮条：内部混用硬编码色值，得用::v-deep或局部 SCSS 覆盖
真正容易被忽略的是：变量声明成功 ≠ 所有组件响应变化。有些样式路径绕过了变量体系，得靠开发者主动补位，而不是指望“改了:root就万事大吉”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
