Less变量与CSS变量本质不同：前者编译期静态，后者运行时动态；二者不可直接转换，强行映射会丢失可变性或引发隐蔽bug。
不能直接“转换”，Less变量是编译期静态值，CSS变量是运行时动态值；二者语义不同，强行映射会丢失可变性或引入隐蔽 bug。
Less变量赋值给--css-var会报错
写 --primary-color: @primary-color; 会被 Less 解析器拒绝，报 ParseError: Syntax Error。Less 不识别以 -- 开头的自定义属性声明语法，也不允许在属性名位置使用预处理器变量。
- 唯一能通过编译的写法是字符串插值：
--primary-color: @{primary-color}; - 但这只是把
@primary-color当前值（比如#1890ff）硬编码进 CSS，后续 JS 调用document.documentElement.style.setProperty('--primary-color', 'red')完全无效 - 如果你需要 JS 控制主题色，就别让 Less 参与这行声明
想透传 CSS 变量到 Less 中，必须用 var() 显式包裹
要在 Less 里安全引用一个浏览器运行时才确定的 CSS 变量，只能写成：
@primary-color: var(--primary-color, #007bff);
- 必须带
var()函数，不能省略；也不能写成@primary-color: --primary-color;或@primary-color: @{--primary-color};，后者会被解析为未定义变量而报错 - fallback（逗号后的值）必须显式指定，否则未定义时退化为
inherit，可能造成文字透明或意外继承父级颜色 - 该声明必须放在全局作用域（如
variables.less顶部），嵌套在.dark {}里会导致编译失败 ——@primary-color在块外不可见 - 所有使用
@primary-color的地方（如color: @primary-color;）最终输出的就是color: var(--primary-color, #007bff);，不固化值
Webpack/Vite 中改 modifyVars 不触发 HMR
配置 less-loader 的 modifyVars（如 { '@primary-color': '#1890ff' }）是一次性构建期替换，改完必须重启 webpack dev server 或 vite dev 才生效。
- 它不支持热更新：改了变量值 → 保存 → 浏览器样式不会自动刷新
- 若需运行时切换主题，得自己封装 HMR-aware 的 less 加载器，监听变量变化后调用
less.render+ 替换标签内容 - 更轻量的做法是放弃
modifyVars，改用纯 CSS 变量 + JS 控制，把 Less 仅用于结构复用（Mixin、嵌套等），不参与主题值管理
真正容易被忽略的是：你写的 @primary-color 在浏览器开发者工具里永远查不到 —— 它只存在于编译过程，最终留下的只有 var(--primary-color, ...)。别在 DevTools 的 Styles 面板里找 Less 变量名，那不是 bug，是设计使然。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
