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 变量体系无感。
- Element Plus 的组件样式（如
el-button）内部写的是color: var(--el-color-primary);，不是color: $primary-color; - 你改的
@primary-color只可能影响你自己写的、且显式用了该 Less 变量的样式，不影响 Element Plus 组件 - 若同时引入了
element-plus/dist/index.css，它会把--el-color-primary“固化”为具体颜色值，后续再声明同名 CSS 变量也无效
真正生效的覆盖方式只有 CSS 变量
必须在运行时通过 CSS 规则重设 --el-color-primary 等变量，且确保它在 Element Plus 样式之前加载：
- 删掉
main.ts或main.js中的import 'element-plus/dist/index.css' - 在
main.ts的createApp()之后、app.mount()之前，引入一个纯 CSS 变量声明文件（如src/assets/styles/element-theme.css） - 内容必须是
:root { --el-color-primary: #06b0b2; --el-color-primary-light-3: #3dd1c6; }，不能包裹在任何选择器内 - 若用 Less 写这个文件，得靠
.theme { --el-color-primary: #06b0b2; }这种方式生成 CSS 变量声明，再确保该类名被加到根节点上
Less 里模拟 CSS 变量覆盖容易踩的坑
Less 本身无法“覆盖” CSS 变量，只能生成含新变量声明的 CSS 规则。但这类生成极易失效：
-
.el-button { --el-color-primary: #f00; }没用——el-button内部读的是:root下的值，不是父级声明 -
button:hover { --el-color-primary: #f00; }也没用——伪类声明的变量只对::before等伪元素生效，不影响按钮自身 - 嵌套中写
.card { @primary-color: red; }不会生成--el-color-primary，只会污染你的 Less 变量表 - DevTools 的 Computed 面板里搜
--el-color-primary，看它来自哪条规则、是否被划掉、继承链是否中断，比盯着 Less 文件更可靠
真正关键的不是怎么写 Less，而是确认最终浏览器里 --el-color-primary 的值是从哪里来的、有没有被更早或更晚的样式覆盖掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
