直接改@primary-color等Less变量即可，但必须确保less-loader处理antd的.less文件、开启javascriptEnabled、modifyVars配置正确且变量名与源码完全一致，同时避免babel-plugin-import干扰编译流程。
直接改 @primary-color 等 Less 变量就行，但得确保生效路径正确
Ant Design 的主题定制本质就是覆盖 Less 变量，不是“CSS 变量”（--ant-primary-color），而是原始的 Less 变量（如 @primary-color）。很多人卡在“改了没反应”，根本原因是 less-loader 没正确处理 node_modules/antd 下的样式文件。
关键点：
- 必须让
less-loader处理 antd 的.less文件，不能 excludenode_modules -
modifyVars要写在lessOptions里（less-loader@6+），旧版本直接写在 options 顶层 -
javascriptEnabled: true必须开启，否则@import和函数调用会失败
modifyVars 中变量名要和 antd 源码完全一致，大小写敏感
比如你想改主色，必须写 'primary-color': '#1DA57A'，而不是 'primaryColor' 或 'PrimaryColor'。所有可用变量名都定义在 antd 的 components/style/themes/default.less 里，常见变量包括：
'primary-color''border-radius-base''font-size-base''text-color''border-color-base'
注意：v5+ 中部分变量已从 @link-color 改为 @link-default-color，建议直接查你所用 antd 版本的 default.less 文件确认，别凭记忆硬写。
立即学习“前端免费学习笔记（深入）”；
用了 babel-plugin-import？它会干扰 Less 变量覆盖
如果你启用了按需加载（比如通过 babel-plugin-import 引入 Button），默认会走 es/style/index.js → css 路径，绕过 Less 编译流程，modifyVars 就完全失效。
解决办法只有两个：
- 停用
babel-plugin-import，改用完整引入：import 'antd/dist/reset.css';+ 自己配 less-loader 全量编译 - 保留插件，但显式指定 less 入口：在组件中 import
antd/es/button/style/index.less（或antd/lib/button/style/index.less），确保该 less 文件被less-loader处理
后者更重，但能兼顾按需和定制；前者更稳，适合中大型项目统一主题管控。
想同时支持 CSS 变量动态切换？别混用两套机制
Less 变量覆盖（modifyVars）和运行时 CSS 变量切换（ConfigProvider theme={{ cssVar: true }}）是两条正交路径。前者在构建时生成静态 CSS，后者靠 JS 动态注入 CSS 变量。
常见误区：
- 以为改了
modifyVars就能影响cssVar: true模式下的变量值 —— 不会，cssVar模式读取的是 design token 配置，和 Less 无关 - 在
cssVar: true模式下还配modifyVars—— 无效且冗余，构建产物里不会生成对应 CSS 变量的 fallback
结论：要静态定制、构建期确定主题，用 Less；要运行时换肤、用户可选主题，用 ConfigProvider theme + cssVar: true，别交叉配置。
