Less变量覆盖不生效，根本原因是其编译期特性：变量按@import顺序线性展开、就近锁定，用过即固化；后续重定义不影响已编译规则，!default仅在首次声明时生效，且需javascriptEnabled开启才能支持Ant Design的JS表达式。
Less变量覆盖不生效，不是“没写对”，而是你把变量当成了运行时可重赋值的东西——它根本不会惰性加载，也没有作用域提升；所有变量在编译期就按@import顺序线性展开、就近锁定，用过即固化。
为什么@primary-color改了但按钮颜色没变
变量值在被引用的那一刻就被替换成字面量，后续再改同名变量，对已编译的规则完全无效。比如button.less里写了color: @primary-color;，而variables.less在它之后才@import，那这行编译出来就是color: #007bff;（默认值），后面无论你怎么覆盖@primary-color都影响不到它。
- 检查
@import顺序：所有变量文件（如variables.less）必须放在最前面，组件样式文件（如button.less）必须在后 - 不要依赖“后定义覆盖前使用”：Less不回溯重编译，只单向展开
- Vue/React单文件组件中
<style lang="less">是独立作用域，不会自动看到项目根目录下的variables.less
!default为什么没起作用
!default只在变量“尚未被声明过”时才生效，不是“优先级更低时兜底”。如果Ant Design源码里已经写了@primary-color: #007bff;，你再写@primary-color: #dc3545 !default;就完全被跳过。
- 确保带
!default的定义是整个编译流程中对该变量的**首次出现** - Ant Design 4.x 的主题入口（如
default.less）会主动@import自己的variables.less，把你后写的覆盖文件挡在作用域外 - Webpack中若配置了
include: /node_modules\/antd/，你的自定义theme.less根本不会走modifyVars逻辑
Webpack/Vite中modifyVars失效的隐藏条件
modifyVars不是万能开关，它依赖less-loader或vite.config.ts中javascriptEnabled: true开启——否则Ant Design里大量用到的JS表达式（如color(~`colorPalette('@primary-color', 5)`)）会静默失败或 fallback 到默认值。
- Less 3.x（Ant Design 4）和 Less 4.x（Ant Design 5）对
javascriptEnabled的配置位置不同，必须核对文档版本 - Vite中
@/styles/variables.less这类别名路径在@import里不被识别，得写相对路径或用additionalData注入 - 热更新（HMR）时，
additionalData注入可能不同步，导致样式闪动或回退，默认值只在冷启动时生效
调试时怎么快速定位哪个@primary-color生效了
Less没有源码映射，浏览器开发者工具看不到变量来源，只能靠编译期干预。
- 用
lessc --lint扫描重复定义（Less 4.0+支持），提示类似Warning: variable @primary-color redefined - 临时在
variables.less末尾加.debug-var { color: @primary-color; }，然后在浏览器里搜.debug-var看最终生成的值 - 禁用所有
@import (once)和@import (reference)，全部改用普通@import，排除导入策略干扰 - 搜索整个项目
@primary-color:，按文件路径排序，最后出现的那个才真正生效——因为Less是线性覆盖，不是合并
最常被忽略的一点：你以为在theme.less里改了变量就能全局生效，但Ant Design的Table、Form等组件样式文件可能压根没重新接入你这个上下文，它们仍走自己的default.less → components.less链路。覆盖必须发生在整个主题编译链的源头，而不是某个中间文件里。
