为什么Element Plus的CSS无法使用Less变量覆盖

Element Plus 2.4+ 主题定制必须通过运行时 CSS 变量（如 --el-color-primary）实现，Less 变量（如 @primary-color）仅编译期替换且不影响组件样式；正确方式是在 Element Plus 样式加载前于 :root 中重设 CSS 变量。

Element Plus的CSS变量和Less变量根本不是一回事

Element Plus 2.4+ 全面依赖浏览器原生的 --el-color-primary 这类 CSS 自定义属性，而 Less 中的 @primary-color 是编译期文本替换，两者运行阶段完全不同。你在 Less 文件里写 @primary-color: #007bff;，编译后生成的是 color: #007bff; 这样的静态值，根本不会留下 --el-color-primary 变量供运行时读取。

直接改 @primary-color 为什么无效

Element Plus 的最新主题定制机制不消费 Less 变量，它只响应 CSS 变量。即使你用 @use 引入了 element-plus/theme-chalk/src/common/var.scss 并试图覆盖 $colors，那也只是影响 SCSS 编译路径下的旧式主题方案（已逐步弃用），对当前默认启用的 CSS 变量体系无感。

1. Element Plus 的组件样式（如 el-button）内部写的是 color: var(--el-color-primary);，不是 color: $primary-color;
2. 你改的 @primary-color 只可能影响你自己写的、且显式用了该 Less 变量的样式，不影响 Element Plus 组件
3. 若同时引入了 element-plus/dist/index.css，它会把 --el-color-primary “固化”为具体颜色值，后续再声明同名 CSS 变量也无效

真正生效的覆盖方式只有 CSS 变量

必须在运行时通过 CSS 规则重设 --el-color-primary 等变量，且确保它在 Element Plus 样式之前加载：

1. 删掉 main.ts 或 main.js 中的 import 'element-plus/dist/index.css'
2. 在 main.ts 的 createApp() 之后、app.mount() 之前，引入一个纯 CSS 变量声明文件（如 src/assets/styles/element-theme.css）
3. 内容必须是 :root { --el-color-primary: #06b0b2; --el-color-primary-light-3: #3dd1c6; }，不能包裹在任何选择器内
4. 若用 Less 写这个文件，得靠 .theme { --el-color-primary: #06b0b2; } 这种方式生成 CSS 变量声明，再确保该类名被加到根节点上

Less 里模拟 CSS 变量覆盖容易踩的坑

Less 本身无法“覆盖” CSS 变量，只能生成含新变量声明的 CSS 规则。但这类生成极易失效：

1. .el-button { --el-color-primary: #f00; } 没用——el-button 内部读的是 :root 下的值，不是父级声明
2. button:hover { --el-color-primary: #f00; } 也没用——伪类声明的变量只对 ::before 等伪元素生效，不影响按钮自身
3. 嵌套中写 .card { @primary-color: red; } 不会生成 --el-color-primary，只会污染你的 Less 变量表
4. DevTools 的 Computed 面板里搜 --el-color-primary，看它来自哪条规则、是否被划掉、继承链是否中断，比盯着 Less 文件更可靠

真正关键的不是怎么写 Less，而是确认最终浏览器里 --el-color-primary 的值是从哪里来的、有没有被更早或更晚的样式覆盖掉。