Ant Design 的 @primary-color 是 Less 编译期变量，非运行时 CSS 变量，必须在 default.less 后、antd.less 前正确重定义并确保 modifyVars 注入或 theme.less 全局导入，否则编译不生效；同时需移除 antd.css 静态引入，避免覆盖。
变量没在编译前注入，@primary-color等于白写
Ant Design 的 @primary-color 不是运行时可改的 CSS 变量，它在 Less 编译阶段就被替换成具体颜色值（比如 #1890ff），生成的 CSS 里根本不存在 @primary-color 这个符号。你改了变量但组件没变色，大概率是变量压根没参与编译。
常见错误：
- 在
Button.module.less里重定义@primary-color→ 作用域仅限该文件，不影响全局主题 - 先
import 'antd/dist/antd.css'，再 import 自定义 less → 浏览器已加载静态 CSS，变量覆盖无效 - CRA 项目没配
craco-less或漏写modifyVars: { '@primary-color': '#ff6b35' }→ Webpack 根本没把新值传给 less-loader -
@import '~antd/lib/style/themes/default.less'路径写错（比如少个/themes/）→ 导入失败，后续所有变量声明被跳过
Less @import 顺序错一环，整个链就断了
Ant Design 主题生效只认一条顺序：基底变量 → 重定义 → 组件样式。顺序乱了，变量就“迟到”——组件已经按默认值编译完了。
正确做法（新建 src/theme.less）：
立即学习“前端免费学习笔记（深入）”；
@import '~antd/lib/style/themes/default.less'; @primary-color: #ff6b35; @border-radius-base: 6px; @font-size-base: 14px; @import '~antd/dist/antd.less';
然后在 src/index.tsx 最顶部（任何其他 import 之前）写：import './theme.less';
必须删掉所有 import 'antd/dist/antd.css' —— 它和 Less 编译流程互斥，留着必失效。
变量被更高权重选择器覆盖，颜色“看起来没变”
即使变量编译正确，生成的 .ant-btn-primary 规则也可能被更具体的选择器压制。比如框架内部写了 .ant-btn-primary:hover，而你只覆盖了默认态，hover 时就回退到蓝色。
排查方法：
- 打开浏览器开发者工具，选中按钮元素，在
Computed面板看最终color/background来自哪条规则 - 注意是否有
!important、是否用了更具体的选择器（如div .ant-btn-primary比.ant-btn-primary权重高） - Tailwind 用户若用
!text-red-500才生效，说明需要启用important: true配置
深色模式或缓存让换肤“卡住”
Ant Design v5+ 支持运行时换肤，但它是靠注入新的 <style></style> 标签实现的。如果旧标签没移除，或者 :root 上的 CSS 变量没更新，页面就会停留在旧主题。
检查点：
- 在 Elements 面板选中
，看Styles里--primary-color是否已更新 - Vite/HMR 场景下，less 文件热更新有时不触发全局重计算，可临时加个空格保存强制刷新
- 深色模式可能依赖独立变量（如
@primary-color-dark），别只改 light 主题变量 - 浏览器缓存 CSS 文件？试试
Ctrl+Shift+R强刷，或 DevTools 勾选 “Disable cache”
真正麻烦的不是改哪一行代码，而是变量在哪一刻被读取、在哪一刻被替换、又被哪条 CSS 规则盖过去——三个环节缺一不可。
