less变量在浏览器中不存在，因其编译时已被替换为固定值；实现运行时主题切换必须通过css自定义属性（如--primary-color）桥接，js调用setproperty动态修改，并在less中用var(--primary-color, @primary-color)回退。
Less变量在浏览器里根本不存在，所以谈不上“修改”——它早在构建阶段就被替换成固定值了，运行时连@primary-color这个符号都搜不到。
Less变量只活在编译期，不是运行时实体
你写的@primary-color: #1890ff;，经过less-loader或lessc处理后，所有引用它的地方（比如color: @primary-color;）都会被直接替换成color: #1890ff;。最终输出的CSS文件里，没有@开头的任何东西。
-
getComputedStyle(document.body).getPropertyValue('@primary-color')永远返回空字符串 -
import './variables.less'在JS中会报错，Webpack不支持直接加载.less文件 -
less.modifyVars()只影响尚未编译的源码，对已生成并注入DOM的CSS毫无作用
你以为在改变量，其实是在改空气
常见误操作：在控制台执行less.modifyVars({'@primary-color': '#dc3545'})，然后发现按钮颜色没变——因为该调用不会重写已挂载的<style></style>标签，也不会触发页面重绘。
Comet AI 浏览器
下载
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
- 现代构建工具（Vite/Webpack）默认禁用浏览器端Less编译，
less.js仅用于开发调试，且性能差、无HMR、无法隔离组件 - 即使强行启用，
less.modifyVars()也只对后续less.render()生效，不影响已有样式 - 试图用JS读取
@font-size-base？它早变成font-size: 14px;了，JS只能读到计算后的像素值，拿不到原始变量名
真正能运行时改的，只有CSS自定义属性
想实现主题切换、用户配色、暗色模式响应，必须靠--primary-color这类CSS变量桥接：
- Less里写：
color: var(--primary-color, @primary-color);，第二个参数是降级值，确保未设CSS变量时不崩 - JS里改：
document.documentElement.style.setProperty('--primary-color', '#e74c3c');，所有var(--primary-color)立刻重绘 - 别漏掉
trim()：读取时getComputedStyle(...).getPropertyValue('--x').trim()，否则可能带空格 - 命名必须严格一致：
@text-color→--text-color，大小写、连字符一个都不能错
容易被忽略的是：很多人把var(--x)当成JS里的let x，却忘了它是级联属性——父元素设了--x，子元素没覆盖就会继承，调试得按CSS层叠逻辑来，不是查作用域链。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
