less变量无法运行时修改，必须用css自定义属性（--primary-color）桥接：less编译时将@primary-color替换为静态值，js无法读取；需在variables.less中导出为--primary-color，并通过document.documentelement.style.setproperty()动态修改。
Less变量无法在CSS中动态修改，这不是bug，是编译模型决定的——@primary-color这类变量在构建阶段就被替换成#007bff，运行时根本不存在。想实现“换肤”“主题切换”“用户配色偏好”，必须用CSS变量（--primary-color）作为桥接层。
为什么@primary-color不能被JS直接读写
Less是预处理器，不是运行时引擎。你写的@primary-color: #4a6fa5;经过lessc或less-loader处理后，所有出现@primary-color的地方都已硬编码为#4a6fa5，最终输出的CSS里连这个符号都搜不到。
-
getComputedStyle(document.body).getPropertyValue('@primary-color')永远返回空字符串 -
import './variables.less'在JS中会失败，Webpack不支持直接import .less文件 - 试图用
less.modifyVars()重设变量，只影响尚未编译的源码，对已加载的样式无效
如何在Less中安全桥接到--primary-color
核心是让Less放弃固化值，改用var(--xxx)做运行时求值，并提供合理回退值。
- 在
variables.less末尾定义导出mixin：.export-variables() { --primary-color: @primary-color; --border-radius-base: @border-radius-base; } - 确保该mixin被调用，比如在
main.less里写.export-variables(); - 所有使用处改为：
color: var(--primary-color, #007bff); border-radius: var(--border-radius-base, 4px); - 不要漏掉回退值（逗号后的部分），否则变量未定义时样式会失效
JS怎么正确读写这些桥接变量
读写必须作用于声明变量的节点，通常是document.documentElement（即:root），而不是document.body或任意元素。
- 读取：
getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim()（注意trim()，否则可能带空格） - 写入：
document.documentElement.style.setProperty('--primary-color', '#dc3545')（必须带--前缀） - 批量更新建议封装函数，避免重复写
document.documentElement.style - 不要用
cssText覆盖整个style属性，会清空其他自定义属性
容易被忽略的同步与兼容性细节
真正难的不是写一行setProperty，而是四层变量始终咬合：Less源码、CSS输出、JS逻辑、设计系统文档。
- 命名必须严格一致：
@font-size-base→--font-size-base，大小写、连字符都不能错 - 检查编译后CSS是否真包含
:root { --primary-color: #4a6fa5; }，别只信Less文件里写了.export-variables() - IE不支持CSS变量，如需兼容，得 fallback 到 class 切换（如
html.dark）并配合!important或更高优先级选择器 - CSS变量无法在
@media或::before里做条件插值，比如content: var(--label-text, 'default');在伪元素中可能不生效
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
