less变量重定义没生效，根本原因是编译链断裂：@primary-color必须在antd.less加载前定义并注入，否则组件已按默认值编译完毕；正确顺序是先导入default.less、再重定义变量、最后导入antd.less，且需确保less-loader处理node_modules、javascriptenabled:true开启。
Less变量重定义没生效，其实是编译链断了
根本不是你写错了 @primary-color，而是它压根没参与 Ant Design 的样式编译。Ant Design 的 antd.less 一加载，所有组件就按默认变量值编译完了；你后写的变量声明，等于对已编译完的 CSS “喊话”，毫无作用。
常见错误包括：
- 在
import 'antd/dist/antd.css'之后再import './theme.less'—— 静态 CSS 已注入 DOM，变量无效 -
@import '~antd/lib/style/themes/default.less'路径少个/或拼错themes，导致导入失败，后续变量全跳过 - 用 CRA 却没配
craco-less，或漏掉lessOptions.javascriptEnabled: true，modifyVars形同虚设
变量被静默覆盖，不是作用域问题，是线性覆盖
Less 没有块级作用域。写 .btn { @primary-color: red; color: @primary-color; } 不会局部生效，而是直接改掉整个编译上下文里的 @primary-color 值。后面所有未锁定引用（比如 .link { color: @primary-color; }）全变成红色——这不是 bug，是 Less 编译器的设计逻辑。
排查要点：
- 全局搜索项目里所有
@primary-color，看谁在最后声明；生效的是最后一个，不是“最靠近”的 -
@import是纯文本拼接，顺序错了就报Variable is undefined或静默覆盖，@import (once)不解决顺序问题 - 别用泛义名，
@btn-primary-bg比@primary-color安全得多；@import (reference)也不能隔离变量，它照样注入全局
ConfigProvider 主题 token 生效但样式仍被压，是因为选择器权重不够
Ant Design 5.x 默认用 :where() 降低 CSS 选择器权重来兼容旧项目，这会让传入的 theme.token.colorPrimary 生成的规则更容易被更具体的选择器（比如 .ant-btn-primary.ant-btn）覆盖。
验证和修复方法：
- 打开 DevTools 的「Computed」面板，确认生效的
colorPrimary确实来自你传入的theme.token - 如果被覆盖，说明子组件用了更高特异性的选择器；此时
ConfigProvider只影响底层变量，不干预 CSS 权重 - 不要靠
!important硬顶——它会引发权重死循环；改用带命名空间的高权重 mixin，比如.override() { .ant-btn { ... } }，可控提权
多个 @import 文件里都定义了同名变量，谁赢？
没有“谁该赢”，只有“谁最后进”。Webpack 中 less-loader 可能并行处理多个入口，variables.less 被多次引入，变量反复覆盖——最终生效的是最后一次解析到的值。
安全做法：
- 拆分变量文件：
variables-brand.less（只放@brand-blue）、variables-btn.less（只放@btn-height等带前缀变量） - 所有变量声明必须带分号：
@spacing-xs: 4px;，少了分号，Less 不报错但会跳过该行及之后所有变量 -
!default只对首次声明有效，@primary-color: #007bff; @primary-color: #333 !default;后者完全无效
@var: value; 都在修改一个扁平、可变、线性的变量表，而不是推入/弹出作用域栈。调试时别盯着嵌套结构看，要盯编译输出和 @import 的实际展开位置。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
