Less变量无法运行时换肤，因其在编译阶段即被替换为固定值；页面颜色不变的根本原因是变量作用域错误、@import顺序不当或modifyVars配置缺失@符号。
改了 @primary-color 但页面颜色没变，不是浏览器缓存问题，而是 Less 变量根本不会在运行时生效——它只在编译阶段被替换成固定值，生成的 CSS 里压根没有这个变量名。
Less 变量是编译期静态替换，不是运行时可读写的
你写的 @primary-color: #007bff; 在 lessc 或 vite-plugin-less 处理时，所有出现 @primary-color 的地方都会被直接替换成 #007bff。最终输出的 CSS 文件里搜不到 @primary-color，JS 用 getComputedStyle 也读不到它。
-
import './variables.less'在 JS 中会报错：Webpack 不支持直接 import .less 文件 -
less.modifyVars()只影响尚未编译的源码，对已注入的样式表无效 - 浏览器控制台执行
getComputedStyle(document.body).getPropertyValue('@primary-color')永远返回空字符串
想动态换色，必须用 CSS 自定义属性桥接
核心做法是让 Less 放弃硬编码，改用 var(--primary-color) 做运行时取值，并提供回退值保障降级。
- 在
variables.less末尾加一个导出 mixin：.export-variables() { --primary-color: @primary-color; } - 在主入口（如
main.less）中调用：.export-variables(); - 所有使用处写成：
color: var(--primary-color, #007bff);—— 逗号后的回退值不能省，否则变量未定义时样式失效 - JS 修改时必须作用于
document.documentElement：document.documentElement.style.setProperty('--primary-color', '#dc3545');
Vite / Webpack 下热更新失效，根源不在 HMR 而在 @import 未被追踪
修改 variables.less 后样式不更新，大概率是因为构建工具根本不知道这个文件被其他 Less 文件 @import 了。
立即学习“前端免费学习笔记（深入）”；
- Vite 的 HMR 图谱只跟踪 JS/TS 的
import，不解析 Less 内部的@import "variables" - 别名路径（如
@/styles/variables.less）在 Less 的@import中会被忽略，必须写相对路径或配--include-path - 解决方案不是重启服务，而是确保
variables.less被某个顶层 Less 文件显式@import，且该顶层文件被 Vue/JS 直接引入（如<style lang="less" src="./index.less"></style>）
真正容易被忽略的是四层一致性：Less 源码里的 @font-size-base、CSS 输出里的 --font-size-base、JS 里 setProperty 的键名、设计文档中的命名，只要一处拼错或漏写 -- 前缀，整个链路就断掉，而且没有任何报错提示。
