global.less需在入口文件顶部显式导入且置于antd样式前；变量重定义须在引入default.less之后、antd.less之前；js中用变量需通过modifyvars或主题文件导入；暗色模式应统一用configprovider theme管理。
global.less没生效？先确认 import 顺序和重启 dev server
Ant Design 的 Less 主题定制，global.less 不是自动加载的——它必须在 src/index.tsx（或 src/app.tsx）顶部显式 import './global.less'，且这行必须出现在所有 antd 相关样式 import 之前。常见失效原因包括：import 路径写错（比如用了 ../styles/global.less）、被动态路由逻辑跳过、或放在了 antd/dist/antd.css 之后。
改完必须手动重启 dev server：热更新不触发全局 Less 变量重解析。检查方式很简单：打开入口文件，搜 global.less，没找到就补上；找到了，就看它是不是第一行样式 import。
@primary-color 改了但按钮颜色不变？变量覆盖顺序比内容更重要
直接在 global.less 里写 @primary-color: #ff6b35; 是无效的，因为 Ant Design 的默认变量早已在 ~antd/es/style/themes/default.less 中定义并加载。你的重定义必须出现在它「之前」。
正确写法是三步走：
- 开头
@import '~antd/es/style/themes/default.less';（路径以node_modules/antd/es/...实际结构为准） - 紧接着重定义变量，如
@primary-color: #ff6b35;、@border-radius-base: 4px; - 最后才
@import '~antd/dist/antd.less';或确保项目中 antd 样式 import 在这个文件之后
否则变量会被默认值覆盖，CSS 选择器权重再高也救不回来。
想让自定义变量在 JS 组件里用？别指望 global.less 直接透出
global.less 是纯 CSS 作用域，里面的 @xxx 变量无法被 React 组件的 style={{}} 或 className 直接读取。需要变量“进 JS”，得靠构建层注入。
推荐两种可靠方式：
- 用
craco或webpack配置lessOptions.modifyVars，例如{ 'primary-color': '#ff6b35' }，这样变量能同步影响 JS 行为（比如暗色模式判断） - 新建统一主题文件
src/themes/index.less，在里面定义并导出变量；组件内用module.less时，通过@import '../../themes/index.less';引入——注意别在组件里重复@import '~antd/es/style/themes/default.less'，容易冲突
暗色模式下主题失效？theme 配置和 CSS 覆盖不能混用
Ant Design Pro 5+ 使用 ConfigProvider theme 做主题管理后，global.less 里的变量修改对暗色模式几乎无效。因为 theme.darkAlgorithm 会重新计算整套 token，绕过你写的 Less 变量。
正确做法是统一走 ConfigProvider 的 theme 属性，并配合 algorithm 字段组合算法：
<configprovider theme="{{" algorithm: theme.darkalgorithm token: colorprimary:></configprovider>
如果仍需 Less 定制（比如冻结列阴影），只针对 light 模式下的特定组件做局部覆盖，且务必加 .ant-pro-light 类前缀限定作用域，避免和暗色模式样式打架。
最常被忽略的一点：Less 变量定制本质是编译时行为，它和运行时主题系统（ConfigProvider theme）属于两套机制，强行混用会导致预期外的覆盖优先级混乱。企业级项目建议明确分层——基础色系用 modifyVars 注入构建流程，动态切换和语义化 token 交给 theme 管理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
