Less变量无法在运行时被JavaScript修改，因其在构建阶段已被编译为固定值，浏览器中根本不存在；正确做法是用@primary-color: var(--primary-color, #007bff)桥接CSS变量，并通过document.documentElement.style.setProperty()动态更新。
Less变量无法在运行时被JavaScript修改，是因为它根本不会出现在浏览器里——所有@primary-color类的变量都在构建阶段被编译成固定值，最终输出的CSS里连变量名都不存在。
Less变量在编译期就被“蒸干”了
你写的@primary-color: #007bff;，经过lessc或less-loader处理后，所有引用它的位置（比如color: @primary-color;）都会直接替换成color: #007bff;。生成的CSS文件是纯静态的，没有变量、没有作用域、也没有运行时求值能力。
- 在开发者工具里搜索
@primary-color，结果一定为空 -
getComputedStyle(document.body).getPropertyValue('@primary-color')永远返回空字符串 -
import './variables.less'在JS中会失败，Webpack不支持直接加载.less文件 - 调用
less.modifyVars()只影响尚未编译的源码，对已加载的CSS完全无效
为什么@{name}拼不出合法的var(--xxx)
有人尝试用插值写@name: primary-color; color: var(--@{name});，看起来能编译出color: var(--primary-color);，但这只是字符串拼接，不是动态解析。
- 如果
@name来自函数计算（如extract()），Less 4.0+ 不支持运行时求值，插值会失败或报错 -
var(--@{name})在浏览器中会被当成无效语法丢弃，因为--@{name}不是合法的自定义属性名 - 安全写法永远是显式写死：
color: var(--primary-color, #007bff);
正确桥接路径：Less → CSS变量 → JS
想让JS控制样式，唯一可靠方式是让Less放弃固化值，改用var(--xxx)做运行时求值，并由JS通过document.documentElement.style.setProperty()修改。
立即学习“Java免费学习笔记（深入）”；
- 在
variables.less顶部写：@primary-color: var(--primary-color, #007bff); - 确保
:root { --primary-color: #007bff; }被实际输出（可通过.export-variables()mixin导出） - JS修改只需一行：
document.documentElement.style.setProperty('--primary-color', '#ff6b35'); - 读取时注意
trim()：getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim()
真正难的不是写那一行setProperty，而是四层命名必须咬死：Less里叫@font-size-base，CSS变量就得叫--font-size-base，JS里也得用这个全名——漏一个连字符、错一个大小写，桥就断了。
