less变量是编译期静态替换，运行时不存在；覆盖失效主因是@import顺序错误、路径错误或热更新未触发，动态换肤需用css自定义属性--primary-color实现。
Less变量覆盖后页面样式没更新，不是缓存或写法错误，而是变量在编译阶段就被替换成固定值，运行时根本不存在——你改的只是源码，但浏览器加载的是早已生成的 CSS，里面压根没有@primary-color这个符号。
Less变量是编译期静态替换，不是运行时可变值
你在variables.less里写@primary-color: #52c418;，所有引用它的样式（比如.btn { color: @primary-color; }）在构建时就被替换成color: #52c418;。最终输出的 CSS 文件里搜不到@primary-color，JS 用getComputedStyle()也读不到它。
-
modifyVars()只影响下一次编译，不是运行时 API；改完不重启 dev server，等于没改 - 浏览器控制台执行
document.documentElement.style.setProperty('--primary-color', '#52c418')对 Less 变量完全无效 - 试图用
@import在 JS 里动态加载 .less 文件会报错：Webpack 不支持直接 import .less
变量覆盖失效，大概率是@import顺序错了
Less 按@import顺序线性展开变量，先被引用的规则就“锁死”了当时的值，后续重定义不影响已编译部分。
- 必须把
variables.less放在最前面：@import "variables.less"; @import "antd.less"; - 如果
antd.less先加载，它内部已经按默认@primary-color编译完了，你后写的覆盖毫无作用 - 路径写错（比如
@import "~antd/lib/style/themes/default.less"少了个/）会导致导入失败，变量表为空，后续全用默认值 - 别依赖
!default兜底——它只在变量首次声明时生效；Ant Design 源码里已定义过@primary-color，你的!default会被跳过
Vite/Webpack 热更新不触发，其实是文件没进编译流水线
Vite 的 HMR 图谱不解析 Less 内部的@import，只跟踪 JS/TS 的 import。你改了variables.less，但构建工具根本不知道谁在用它。
- 别在
additionalData里写@import "@/styles/variables.less"——Less 不识别别名，静默失败 - 必须用绝对路径：
@import "${path.resolve(__dirname, 'src/styles/variables.less')}"; - 确保
javascriptEnabled: true已开启，否则 Ant Design 里的colorPalette()等 JS 表达式会 fallback 到默认值 - 验证是否加载成功：在
variables.less第一行加@debug "loaded";，终端没输出就是没进编译
真正能动态换肤的只有 CSS 自定义属性
想点一下就换色，必须绕过 Less 变量，用--primary-color桥接：Less 负责导出，JS 负责写入，CSS 负责回退。
- 在
variables.less末尾加.export-variables() { --primary-color: @primary-color; }，并在主入口调用它 - 所有样式用
color: var(--primary-color, #007bff)，逗号后的回退值不能省，否则变量未设时样式崩 - 切换主题时只调
document.documentElement.style.setProperty('--primary-color', '#52c418')，别碰<style></style>或styleSheets - Modal、Message 这些静态方法脱离 React context，即使用了
ConfigProvider，也得显式传contextHolder，否则浮层里永远是旧主题
最容易被忽略的是四层一致性：@primary-color（Less 源码）、--primary-color（CSS 输出）、setProperty('--primary-color')（JS 写入）、设计文档命名——只要一处漏了--前缀、拼错字母或单位缺失，整个链路就断掉，而且没有任何报错提示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
