less变量覆盖失败的根本原因是编译链断裂：@primary-color必须在antd.less加载前定义并注入，否则组件已按默认值编译完毕；正确顺序是先导入default.less、再重定义变量、最后导入antd.less，且需确保less-loader处理node_modules、javascriptenabled:true开启。
Less变量覆盖失败，根本不是写错了值
Ant Design的@primary-color改了但按钮还是蓝色，大概率不是变量名拼错或值写错，而是Less编译链断了。变量必须在antd.less加载前完成定义和注入，否则所有组件样式早已按默认值编译完毕——你改的变量根本没参与编译过程。
常见失效路径包括：
-
import 'antd/dist/antd.css'仍留在入口文件里：它和Less编译冲突，CSS已静态生成，后续变量无效 -
@import '~antd/dist/antd.less'写在自定义变量之前：变量还没声明，antd.less就直接用默认值编译了 - CRA项目没配
craco-less或漏掉javascriptEnabled: true：Ant Design大量使用Less内联JS表达式（比如colorPalette('@primary-color', 5)），没开JS支持，modifyVars等于摆设 - 路径写成
~antd/lib/style/themes/default.less少了个/：导入失败，整个变量表为空，后续所有引用都报Variable is undefined
正确加载顺序只有一条链路
变量生效不靠“覆盖”，而靠“编译时注入”。必须严格按三步走：
- 先
@import '~antd/lib/style/themes/default.less'（基底变量） - 再重定义变量，如
@primary-color: #ff6b35（仅在此处赋值） - 最后
@import '~antd/dist/antd.less'（触发带新变量的完整编译）
这个顺序不能调换，也不能拆到不同文件里。新建src/theme.less，内容严格按此结构；并在src/index.tsx最顶部、任何其他import之前引入它：import './theme.less'。
注意：@import (once)或@import (reference)都不能解决变量作用域问题——Less没有模块化作用域，所有@import都是线性文本拼接，变量表是扁平可变的。
为什么在组件级Less里改@primary-color无效
你在Button.module.less里写@primary-color: red，只会影响该文件内后续引用，完全不参与Ant Design全局主题构建。Ant Design组件样式是从antd.less单独编译出来的，和你的模块文件不在同一编译上下文。
更危险的是嵌套中重定义：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
.btn {
@primary-color: red;
color: @primary-color;
}
这行不是局部赋值，而是直接覆盖当前编译上下文里的@primary-color值，之后所有未锁定的引用（比如文件末尾的.link { color: @primary-color; }）都会变成red——但antd.less早已编译完，不受影响。
真正安全的做法是：所有主题变量只在一个地方定义，强制加前缀隔离，比如@btn-primary-bg、@modal-header-padding，避免和框架变量撞名。
Webpack配置里less-loader必须放行node_modules
如果你用less-loader并手动配置options.modifyVars，但没放开node_modules路径，antd/dist/antd.less就不会被less-loader处理，变量注入彻底失效。
检查webpack.config.js中less-loader的test规则是否过滤了node_modules；同时确认resolve.alias已正确定义antd路径，防止Less resolver找不到~antd/...别名。
错误示例：{ test: /\.less$/, exclude: /node_modules/, ... } → 必须删掉exclude或显式包含antd。
最容易被忽略的一点：变量是否生效，和你在JS里import多少次、DOM嵌套多深完全无关，只取决于Less编译时变量是否在作用域内、且是否被antd.less实际引用到了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
