原生 CSS 变量不能替代 Less 变量，因 Less 变量在编译期被替换为静态值，而 CSS 变量需在 :root 中显式声明并全程使用 var() 引用，否则主题切换无效。
直接把 @primary-color 换成 --primary-color 并不能让主题切换生效——Less 编译后变量就没了，JS 改 setProperty 对它完全没反应。
为什么原生 CSS 变量不能直接替代 Less 变量
Less 的 @primary-color 是编译期符号，输出后就是硬编码值（比如 #1890ff），浏览器里根本查不到这个变量名。而 document.documentElement.style.setProperty('--primary-color', '#ff6b35') 只会影响 var(--primary-color) 的取值，前提是你的 CSS 里真用了 var()，而不是直接写死了颜色。
常见翻车点：
- 在 Less 中写
color: var(--primary-color);，但没在:root里声明--primary-color—— 浏览器 fallback 到 inherit 或 initial，样式变灰 - 用
lighten(@primary-color, 10%)计算出新色值，却忘了把它也导出为--primary-color-light—— JS 只能改一个变量，其他衍生色还是静态的 - 以为
modifyVars配置完就能运行时切色 —— 不会，那是重新生成一套 CSS 文件，页面不刷新就看不到效果
必须桥接：用 Less 变量生成 CSS 变量
核心动作是在编译阶段把预处理器逻辑“落地”为可运行时操作的 CSS 变量。所有颜色计算必须在 Less 层完成，再显式赋值给 :root 下的 --xxx。
立即学习“前端免费学习笔记（深入）”；
正确写法示例：
Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。
@primary-color-base: #1890ff;
@primary-color-light: lighten(@primary-color-base, 10%);
@primary-color-dark: darken(@primary-color-base, 15%);
<p>:root {
--primary-color: @primary-color-base;
--primary-color-light: @primary-color-light;
--primary-color-dark: @primary-color-dark;
}这样既保留了 Less 的计算能力，又给 JS 留了入口。后续所有组件样式都得基于 var(--primary-color)，不能混用 @primary-color。
第三方 CSS 和主题覆盖怎么处理
Ant Design、Element Plus 这类库默认用的是自己的 Less 变量体系，你没法直接改它们的 var()。强行覆盖容易漏掉伪元素或动态状态样式。
稳妥做法是：
- 禁用
css-loader的modules: true，否则第三方 class 名被哈希后，.ant-btn样式根本找不到目标元素 - 对第三方样式加
/* webpackIgnore: true */注释，防止less-loader尝试解析其 CSS 文件导致报错 - 只在
vendor-overrides.less里用:root变量重写关键属性，例如：.ant-btn { background-color: var(--primary-color); } - 避免在
@import (reference)之外嵌套第三方选择器，否则媒体查询和伪类可能被重复注入多次
构建时 vs 运行时：别混用两套主题逻辑
Webpack 的 modifyVars 和浏览器里的 setProperty 是两条平行线。前者决定你打包出哪套 CSS，后者决定这 CSS 里哪些变量被临时覆盖。
实际项目中容易忽略的关键约束：
- 如果用了
modifyVars生成深色主题 CSS，就别再用 JS 动态切data-theme="dark"—— 两套规则同时生效，最终颜色取决于谁的 CSS 权重高、谁的var()调用更靠后 -
:root块里的变量声明顺序很重要：--primary-color必须在--primary-color-light之前定义，否则lighten(var(--primary-color), 10%)在运行时无法计算（CSS 不支持函数式调用） - IE11 等老环境不支持
var()，得用postcss-custom-properties回退，但回退后所有颜色都是静态值，主题切换功能彻底失效
真正难的不是写对第一行 :root，而是确保整个项目里没有一处漏掉 var()、没有一处还在引用旧的 @ 变量、也没有一处第三方样式绕过了这层桥接。迁移完成前，建议 grep 全局搜 #[a-f0-9]{3,6} 和 @[a-z]，确认硬编码和旧变量已清零。
