less变量无法在运行时修改，因其在构建阶段已被编译为固定值；需用@primary-color: var(--primary-color, #007bff)桥接css变量，并通过document.documentelement.style.setproperty()动态更新。
Less变量无法在运行时动态修改，是因为它根本就不存在于运行时——所有@primary-color这类变量都在构建阶段被替换成固定值，编译完的CSS里连变量名都找不着。
Less变量在构建期就被“蒸干”了
你写的@primary-color: #007bff，经过lessc或less-loader处理后，直接变成color: #007bff。浏览器加载的是纯CSS，没机会再碰@primary-color这个符号。
- 调试时在开发者工具里搜
@primary-color，肯定找不到——它早没了 -
.dark { @primary-color: #222; }这种写法完全无效：编译器忽略块内重定义，或报variable is undefined - 即使用了
modifyVars（如less.modifyVars({ '@primary-color': '#ff6b35' })），也只对尚未编译的Less源生效；已生成的CSS不会重绘
正确桥接方式：用var(--xxx)把CSS变量“借”给Less
想让JS控制颜色，必须让Less放弃固化值，转而依赖CSS变量的运行时求值能力。关键写法是：
@primary-color: var(--primary-color, #007bff);
这行不是“定义变量”，而是声明一个别名，每次渲染都重新读取--primary-color当前值。
- 必须写在全局作用域（如
variables.less顶部），不能嵌套在.dark {}里 -
var()的fallback（#007bff）不能省：未设置--primary-color时，可能退成transparent导致文字消失 - JS修改只需一行：
document.documentElement.style.setProperty('--primary-color', '#ff6b35') - 切主题时无需重载样式表，也不依赖
less.modifyVars或Webpack配置
常见错误：试图用@{theme}拼接var(--@{name})
@name: primary-color; → color: var(--@{name}); 看似能编译出color: var(--primary-color);，但这是字符串拼接，不是动态解析。
- 如果
@name来自函数计算（如extract(...)），Less 4.0+ 不支持运行时求值，插值失败 -
var(--@{name})在浏览器里会被当成无效语法丢弃，因为--@{name}不是合法的自定义属性名 - 安全写法永远是显式写死：
color: var(--primary-color, #007bff) - 别指望
javascriptEnabled: true+~`process.env.THEME`能打通JS与样式——有安全风险，且Webpack 5+ 已限制
Ant Design或Umi项目中变量不生效的根源
Ant Design 3.x 默认引入的是编译好的antd.css，不是antd.less。你改modifyVars，等于对着空气调音。
- 必须手动替换入口文件中的
import 'antd/dist/antd.css'为import 'antd/lib/style/index.less' - Vite用户要注意：
@import '@/styles/variables.less'在Less里静默失败——Vite别名不被Less解析器识别，得改用相对路径或配插件提前解析 - Umi需禁用CSS提取（
cssLoaderOptions: { extract: false }），否则样式被打包成静态CSS，modifyVars彻底失效 - 热更新失效？检查
vite --debug css日志：若variables.less变更没触发HMR，说明它没被纳入watch清单——这是Vite CSS处理分阶段导致的固有缺陷
真正容易被忽略的点：CSS变量虽能运行时切换，但它不参与伪类、媒体查询内的计算（比如:hover { color: calc(var(--primary-color) * 1.2) }非法）。需要这类逻辑，只能靠预设多套变量+JS切换html类名驱动，而非幻想Less变量复活。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
