global.less需在src/index.tsx顶部显式import且置于antd样式前；重定义Less变量须先@import default.less再修改，最后引入antd样式；变量无法在JS中直接使用，应通过craco或统一主题文件导出；暗色模式下需统一theme配置而非CSS覆盖。
global.less 没生效？先确认它是否被入口文件 import
Ant Design Pro 的 global.less 不是自动加载的，它必须在 src/index.tsx（或 src/app.tsx）顶部显式 import './global.less' 才会参与编译。常见错误包括：路径写成 ../styles/global.less、import 语句被挪到中间、或者被动态路由逻辑意外跳过。
检查方法：打开 src/index.tsx，搜 global.less；没找到就补上，且确保这行在所有其他 import（尤其是 antd 相关样式）之前。
改完必须重启 dev server —— 热更新通常不触发全局 less 的重新解析和注入。
覆盖 @primary-color 等 Less 变量，顺序比内容更重要
直接在 global.less 里写 @primary-color: #ff6b35; 是无效的，因为 Ant Design 的默认变量已在 antd/dist/antd.less 中定义并加载。你的重定义必须出现在它之前。
正确做法是：
- 在
global.less开头，先@import '~antd/lib/style/themes/default.less'; - 再重定义变量，如
@primary-color: #ff6b35; - 最后才
@import '~antd/dist/antd.less';（或确保项目中 antd 样式 import 在你这个文件之后）
如果你用的是 Ant Design Pro 5+（基于 antd 5），default.less 路径可能为 '~antd/es/style/themes/default.less'，需按 node_modules 中实际路径调整。
想让自定义变量在组件里也能用？别靠 global.less
global.less 是全局 CSS 作用域，它的变量无法被 React 组件内的 style={{}} 或 className 直接读取。需要变量“透出”到 JS 层或组件内，得换方式：
推荐两种可靠路径：
- 用
craco配置lessOptions.modifyVars，把变量注入构建流程：{ 'primary-color': '#ff6b35' }，这样主题色能同步影响 JS 行为（比如暗色模式切换） - 在
src/themes/index.less（或统一变量文件）中定义并导出，然后在组件里import styles from './MyComponent.module.less'，并在该文件里@import '../../themes/index.less';
注意：不要在组件内部 @import '~antd/lib/style/themes/default.less'，容易引发重复解析或变量冲突。
修改后按钮颜色不对？检查选择器权重和暗色模式干扰
即使 @primary-color 生效了，.ant-btn 这类样式可能仍没变，原因不是变量没起作用，而是 CSS 选择器权重不够，或暗色模式下被 .ant-pro-dark .ant-btn 覆盖。
排查要点：
- 打开浏览器 DevTools，检查按钮元素，看最终生效的
color或background来自哪条规则 - 如果发现是
.ant-btn-primary .ant-btn-inner生效，那就不能只写.ant-btn，要写.ant-btn-primary或更具体的选择器 - 若用了暗色模式，
config/config.ts中的theme配置优先级高于global.less里的硬编码，应统一走配置项而非直接写死变量值
真正麻烦的不是改一个颜色，而是改完之后在 light/dark 两套模式下都保持语义一致 —— 这需要变量通过主题系统注入，而不是靠 CSS 规则强行覆盖。
