在 Ant Design 项目中正确覆盖 Less 变量需确保自定义变量在 antd 默认样式前加载，通过入口文件先引入自定义 Less（含 default.less 导入与重定义），避免修改 node_modules；CRA 中须用 craco 配置 less.modifyVars 并加引号，注意变量依赖链与组件硬编码限制。
如何在 Ant Design 项目中正确覆盖 Less 变量
直接改 @primary-color 这类变量是可行的，但必须确保你的修改在 Ant Design 的默认样式加载之前生效，否则会被覆盖。很多人把变量写在组件里、或者放在全局 CSS 后面，结果完全没反应。
- 入口文件（如
src/index.tsx或src/App.tsx）中，先 import 自定义 Less 文件，再 import antd/dist/antd.less - 自定义 Less 文件里用
@import '~antd/lib/style/themes/default.less';引入原始变量，再重定义，比如：@primary-color: #1890ff; - 不要在
create-react-app中直接修改node_modules/antd下的 Less —— 升级后全丢，且无法 git 跟踪 - Webpack 需启用 Less 解析，若用 CRA 2.x+，要通过
craco或react-app-rewired注入lessOptions.modifyVars，否则变量不生效
使用 modifyVars 动态注入变量时的常见报错
报错 Module build failed: Cannot find module 'less' 或 Invalid CSS after "...": expected 1 selector or at-rule, was "undefined"，基本都是路径或配置位置错了。
-
modifyVars必须传给less-loader的options，不是 Webpack 的resolve.alias - CRA 场景下，
craco.config.js中写法应为：module.exports = { style: { postcss: {}, less: { modifyVars: { '@primary-color': '#1890ff' } } } }; - 变量值如果是颜色，必须带引号（
'#1890ff'），否则 Less 编译器会当成未定义变量报错 - 中文路径、空格路径会导致
less-loader解析失败，建议所有项目路径不含空格和中文
为什么有些变量改了但按钮/输入框没变色
因为 Ant Design 的部分组件样式依赖组合变量（比如 @btn-primary-bg 是基于 @primary-color 计算出来的），而有些组件甚至硬编码了颜色值（如 Alert 的 icon 颜色）。
- 优先查官方变量文档（
components/style/themes/default.less），确认你要改的是「源头变量」而非派生变量 -
@text-color影响文字，但Table的列头文字还受@table-header-color控制，需一并调整 - 图标颜色（如
Icon、Badge）往往不响应@primary-color，得单独覆盖.anticon或用theme配置项配合 JS 主题切换 - 某些组件（如
DatePicker）内部用了内联 SVG，fill 值写死，Less 变量无效，只能靠 CSS 层叠强制覆盖
生产环境主题切换：CSS-in-JS 还是多套 Less 编译
运行时动态换肤别碰 modifyVars —— 它只在构建时生效。想让用户点按钮就切主题，得走 CSS-in-JS 或预编译多套 CSS。
立即学习“前端免费学习笔记（深入）”；
- 多套 Less 编译更稳定：用 Webpack 多入口或不同
modifyVars配置生成dark.css/blue.css，再用 JS 切换<link>标签 - 如果用
ConfigProvider的theme属性（v5.12+），它只控制部分组件的 JS 行为（如ColorPicker），不会重写整个 Less 主题 - 注意字体、圆角、阴影等非颜色变量（如
@border-radius-base）也得同步维护，否则深色模式下看起来依然像浅色皮肤 - 主题 CSS 文件体积会翻倍，建议用
purgecss或按需引入组件样式来压缩
Less 变量定制看着简单，实际卡点都在加载顺序、变量依赖链和组件内部硬编码上。最稳妥的做法是：先跑通单变量修改 → 查 default.less 确认变量层级 → 再批量覆盖 → 最后手动检查高频组件的边缘样式。
