Ant Design 4 的 @primary-color 修改无效，根本原因不是拼写或值错误，而是变量未在 antd.less 编译前注入：必须严格按“先 @import default.less、再重定义变量、最后 @import antd.less”顺序执行，否则变量不参与编译。
Ant Design 4 的 @primary-color 等 Less 变量改了但没生效，基本不是拼写或值写错，而是变量根本没进编译流程——antd.less 已经用默认值编译完了，你后写的变量等于白写。
为什么@import 'antd/dist/antd.less'写在变量前面就失效
Less 是线性拼接，没有模块作用域。一旦 @import '~antd/dist/antd.less' 被执行，所有组件样式立刻按当前变量表（此时还是默认值）编译成 CSS。你后面再写 @primary-color: #ff6b35，它只影响后续代码，对已编译的部分完全无效。
- 错误写法：
@import '~antd/dist/antd.less'; @primary-color: #ff6b35;→ 变量永远不参与主题构建 - 正确顺序必须是：先
@import '~antd/lib/style/themes/default.less'（加载基底变量），再重定义（如@primary-color: #ff6b35），最后@import '~antd/dist/antd.less' - 路径少一个
/，比如写成~antd/lib/style/themes/default.less（漏掉开头的/），导入失败，整个变量表为空，后续引用全报Variable is undefined
为什么import 'antd/dist/antd.css'还留在入口里
这个语句会直接把预编译好的 CSS 插入页面，和你的 Less 编译链完全冲突。它生成的样式已经固化，权重还高，后面通过 Less 注入的新样式大概率被覆盖或忽略。
- 必须删掉项目中所有
import 'antd/dist/antd.css'或类似全局 CSS 引入 - 确保
src/theme.less在src/index.tsx最顶部、任何其他import之前引入：import './theme.less'; - 如果用了
babel-plugin-import并设了style: true，它会自动引入组件级样式，此时再手动 import 全局 CSS 就是双重加载，极易打架
为什么 CRA 项目配了 modifyVars 还是不生效
modifyVars 是给 less-loader 用的配置项，但它不会自动注入到你的 Less 文件里——它只在 less-loader 处理每个 .less 文件时起效。而 Ant Design 的主题变量必须由你显式 @import 进来，modifyVars 本身不触发变量声明。
- CRA 必须用
craco+craco-less才能接管 less 配置；直接改 webpack 不生效 -
craco.config.js中必须设javascriptEnabled: true，否则colorPalette('@primary-color', 5)这类表达式直接报错，变量表中断 -
modifyVars键名必须带@符号，写成'primary-color'不会被识别，得是'@primary-color' - 改完配置必须重启 dev server，热更新不会触发 Less 重编译
为什么在组件级 Button.module.less 里改 @primary-color 没用
你在 Button.module.less 里写 @primary-color: red，只会影响该文件内后续的 color: @primary-color，完全不参与 Ant Design 全局主题构建。Ant Design 组件的样式是从 antd.less 单独编译出来的，和你的模块文件不在同一编译上下文。
- 全局主题变量不能靠“覆盖”，只能靠“编译时注入”——必须走
default.less→ 自定义 →antd.less这条链 - 想局部调整某个组件颜色，应该用 CSS 类名覆盖，或者用
:where()提升选择器权重，而不是动 Less 变量 - Ant Design 4 不支持运行时换肤，所有主题色都是构建时确定的；别试图用 JS 改
@primary-color，它在浏览器里根本不存在
最容易被忽略的一点：变量生效不是“覆盖”而是“抢占编译时机”。哪怕路径、语法、值全对，只要 antd.less 在你定义变量前就被 @import 了，结果就是蓝色照旧。顺序和位置，比值本身重要得多。
