less变量改了按钮仍蓝色，是因为@primary-color未在antd.less加载前注入编译链，导致组件已按默认值编译完毕；必须严格按顺序在theme.less中先导入default.less、再重定义变量、最后导入antd.less，并禁用antd.css、启用javascriptenabled。
Less 变量改了但按钮还是蓝色，不是你写错了，而是变量根本没进编译链——@primary-color 在 antd.less 加载之后才被定义，它已经按默认值编译完了。
变量必须在 antd.less 加载前注入
Ant Design 的 Less 主题不是“运行时覆盖”，而是“编译期替换”。所有变量（比如 @primary-color）必须在组件样式文件解析前就确定好值，否则引用它的规则（如 .ant-btn { color: @primary-color; }）直接用默认值固化。
- 错误做法：在组件级
Button.module.less里重写@primary-color—— 作用域太窄，不参与全局主题构建 - 错误做法：先
import 'antd/dist/antd.css'，再import './theme.less'—— CSS 已静态生成，变量无处生效 - 正确路径：新建
src/theme.less，严格按顺序写：@import '~antd/lib/style/themes/default.less';<br>@primary-color: #ff6b35;<br>@border-radius-base: 6px;<br>@import '~antd/dist/antd.less';
- 入口文件（如
src/index.tsx）最顶部、任何其他import之前，加import './theme.less'; - 务必删掉项目中所有
import 'antd/dist/antd.css'—— 它和 Less 编译逻辑互斥
less-loader 的 javascriptEnabled 必须开启
Ant Design 的 default.less 里大量使用 JS 表达式计算颜色，例如：@link-color: color(~`colorPalette('@primary-color', 5)`);。如果 less-loader 没启用 JS 支持，这类语句会静默失败或 fallback 到默认值。
-
less-loader@8+：必须在lessOptions下设javascriptEnabled: true -
less-loader@7及以下：直接写javascriptEnabled: true（旧写法，已弃用但仍有效） - Vite 用户：确认
vite.config.ts中css.preprocessorOptions.less同样设置了该选项 - CRA 用户：必须用
craco+craco-less，并在craco.config.js里配好lessOptions
Ant Design 5 的 CSS-in-JS 会干扰 Less 覆盖
Ant Design 5 默认启用 CSS-in-JS（emotion），它生成的类名带哈希、选择器套 :where() 降权，导致你编译出的 Less CSS 规则权重不够，被压在下面。
- 如果你用的是
ConfigProvider theme，就别再引入自己编译的antd.less—— 二者机制冲突，必有一套失效 - 想纯用 Less 主题？得禁用 CSS-in-JS：在
ConfigProvider外层加<styleprovider hashpriority="high"></styleprovider>，它会移除:where()封装，让 class 权重回归正常 - SSR 场景必须走 Less 编译路径 —— 服务端无法执行 JS 注入 CSS 变量，
ConfigProvider.theme首屏直接空白 - 注意：开启
hashPriority="high"后，IE11 等低版本浏览器将不兼容
modifyVars 配置常被 webpack 排除规则拦住
很多人写了 modifyVars 却没效果，真正原因不是配置错，而是 webpack 的 less-loader 根本没处理到你的主题文件。
- 常见陷阱：Webpack 规则里写了
exclude: /node_modules/—— 这会让src/theme.less完全绕过less-loader，modifyVars形同虚设 - 更稳妥的做法：把自定义变量逻辑全部收进
src/theme.less，并在里面完整导入 Ant Design 主题链（default.less → 自定义变量 → antd.less），不依赖 loader 全局注入 - 别用
include: /node_modules\/antd/锁死范围 —— 这会导致你的theme.less不走modifyVars流程 - 变量名别加
@前缀：'primary-color'✅，'@primary-color'❌
真正卡住人的从来不是怎么写变量，而是搞清当前项目用的是 v4 还是 v5、是否启用了 CSS-in-JS、以及哪一段样式路径已被新机制接管——同一行 @primary-color: #13c2c2;，在不同版本里可能一个生效、一个彻底忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
