直接修改@primary-color等less变量可覆盖ant design默认样式，但必须在antd原始变量编译前生效，且需引入antd/dist/antd.less而非预编译css文件，同时确保less-loader正确配置modifyvars、javascriptenabled及paths，并避免变量名错误或覆盖顺序不当。
直接改 @primary-color 这类 Less 变量就能覆盖默认样式，但必须确保修改发生在 Ant Design 的原始变量被编译前，否则无效。
确认你用的是 Less 源码而非预编译 CSS
如果你项目里引入的是 antd/dist/antd.css 或 antd/dist/antd.min.css，那改 Less 变量完全不起作用——这些文件已经编译完成，变量早被替换成固定值了。必须改用 antd/dist/antd.less（或通过 babel-plugin-import 启用 style: 'css' 以外的路径）。
- 正确引入方式示例：
import 'antd/dist/antd.less'; - 若用了
babel-plugin-import，需设style: true或style: (name) => `${name}/style/index.less` - Umi 用户可在
.umirc.ts中配theme字段，本质也是透传modifyVars
在 webpack 中配置 modifyVars 时的常见陷阱
less-loader 的 modifyVars 是最常用入口，但几个细节极易出错：
-
lessOptions是less-loader@6+的写法；less-loader@5需直接写options: { modifyVars: { ... } } - 务必让
less-loader处理node_modules/antd下的 .less 文件，不能加exclude: /node_modules/ -
javascriptEnabled: true必须显式开启，否则@import和函数调用会报错 - 变量名要严格匹配 Less 原始定义，比如是
'primary-color'而非'primaryColor'或'--primary-color'
避免变量被重复覆盖或失效
Less 变量按引入顺序覆盖，Ant Design 内部变量在 antd/dist/antd.less 开头就已定义，所以你的自定义变量必须在它之后生效。最稳妥的方式是：自己建一个 theme.less，先 @import '~antd/dist/antd.less';，再覆写变量，最后在入口 JS 中 import 这个 theme.less。
- 不要在多个地方反复调用
modifyVars，webpack 只认最后一次配置 - 如果同时用了 CSS Variable 模式（
cssVar: true），Less 变量修改只影响静态编译产物，不影响运行时 CSS 变量值 - 某些组件内部用了
~别名导入，确保 less-loader 的paths配置包含node_modules
真正容易被忽略的是：Less 变量覆盖只对「使用了该变量」的样式生效。比如改了 @border-radius-base，但某个组件内部硬编码了 4px 圆角，那就不会变——得去查对应组件的 Less 源码确认它是否真的引用了这个变量。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
