Umi中Less变量覆盖失败的根本原因是变量未在antd.less编译前注入，正确做法是：先@import default.less，再重定义变量，最后@import antd.less，并确保javascriptEnabled: true、禁用antd.css、全局配置lessLoader且避免模块级覆盖。
Umi项目里Less变量覆盖失败，基本不是值写错了，而是变量根本没进编译链——@primary-color没在antd.less加载前生效，所有样式早按默认值编译完了。
Umi中Less变量必须在antd.less之前注入
Ant Design的样式是编译时确定的，@import '~antd/dist/antd.less'这一步会把所有组件样式“固化”成CSS。变量覆盖只对它**之后**的引用有效，但组件样式已经在它内部完成了求值。
- 正确顺序只能是：
@import '~antd/lib/style/themes/default.less';→ 重定义变量（如@primary-color: #ff6b35;）→@import '~antd/dist/antd.less'; - 这个三步链必须写在同一个
.less文件里（比如src/theme.less），且该文件要在src/index.tsx最顶部、任何其他import之前引入 - 删掉所有
import 'antd/dist/antd.css'——它和Less编译冲突，留着就等于放弃变量覆盖
Umi配置必须启用javascriptEnabled: true
Ant Design大量使用Less内联JS表达式，例如colorPalette('@primary-color', 5)。如果javascriptEnabled关了，这些表达式直接报错或返回空值，modifyVars传进去的变量也压根不生效。
- Umi项目需在
config/config.ts中显式配置：cssLoader: { modules: false },+lessLoader: { javascriptEnabled: true } - 若用
define方式传变量（如define: { '@primary-color': '#ff6b35' }），同样依赖javascriptEnabled: true才能解析 - 检查
node_modules/antd是否被less-loader处理：Umi默认会对node_modules里的Less文件跳过处理，需确认lessLoader配置已全局生效
避免在组件级.module.less里改@primary-color
你在Button.module.less里写@primary-color: red;，只影响该文件内后续引用，完全不参与Ant Design全局主题构建——因为antd.less是单独编译的，和你的模块文件不在同一上下文。
立即学习“前端免费学习笔记（深入）”；
- 更危险的是嵌套中覆盖：
.modal { @primary-color: #f00; color: @primary-color; }——这会污染整个文件后续所有@primary-color引用，不只是.modal内部 - 想局部换色，别动Less变量，改用CSS自定义属性：
.modal { --primary-color: #f00; }，再让子元素用color: var(--primary-color); - Umi默认只对
.module.css启用CSS Modules，.module.less需手动加cssModulesExcludes: []并确保less-loader输出能被css-loader拦截
调试时重点看Computed面板里的变量来源
浏览器DevTools的Computed面板搜--primary-color（注意是双横线），点开小箭头能看到值来自哪条CSS规则、是否被划掉、继承路径是否中断。最容易被忽略的是：变量查找只认DOM祖先链上的**最近有效声明**，和选择器权重无关，但和CSS源顺序强相关——后加载的CSS文件里的声明，会覆盖先加载的。
- 如果看到
color: #1890ff却没找到--primary-color声明，说明Less变量没导出为CSS变量，或var(--primary-color, #1890ff)回退值写错了 - 如果
document.documentElement.style.setProperty('--primary-color', '#52c418')调用了但没生效，检查是否漏了var(--primary-color, #007bff)里的逗号后回退值——没它，未设变量时整个样式会崩 - Umi热更新（HMR）对嵌套
@import支持差，改了theme.less后建议硬刷新，别只靠HMR
