global.less 未生效是因为未在入口文件（如 src/index.tsx）中显式 import；需检查并补上正确路径的 import 语句，且须重启 dev server。
global.less 为什么没生效
Ant Design Pro 默认用 webpack + less 构建，但 global.less 被注入的时机和作用域容易被忽略：它只在入口 JS（如 src/index.tsx）中显式 import 才会参与编译。如果项目升级过或用了动态路由，global.less 可能根本没被引用。
检查方法：在 src/index.tsx 或 src/layouts/BasicLayout.tsx 顶部搜 import './global.less'；若没有，就补上。
- 确保 import 语句写在最顶部，且路径正确（常见错误：
import '../styles/global.less'路径错） - 不要在组件内部 import
global.less，它必须全局一次性加载 - 修改后需重启 dev server（热更新不总触发 less 全局重编译）
覆盖 Ant Design 组件样式要加 !important 吗
大多数时候不用，但得看选择器权重。Ant Design 的样式默认带 ant-* 前缀且嵌套较深，直接写 .ant-btn { color: red; } 往往被更具体的选择器覆盖（比如 .ant-btn-primary .ant-btn-inner）。
推荐做法是提升选择器特异性，而不是滥用 !important：
- 用
html body .ant-btn或.ant-pro-layout .ant-btn等上下文限定 - 利用
global.less中已有的变量，比如覆盖按钮主色：@primary-color: #1890ff;（这个必须放在所有 antd 样式 import 之前） - 如果非要覆盖内层结构（如 Input 的边框），用
:global(.ant-input-borderless)配合 CSS Modules 逻辑不适用，此时应改用:global包裹整块规则
如何安全地修改主题色而不破坏暗色模式
Ant Design Pro 4+ 默认支持暗色模式切换，靠的是 css variables 和 className 切换（如 colorPrimary 变量由 JS 注入）。直接在 global.less 里硬写 @primary-color: #ff6b35; 会导致暗色模式下颜色失真。
正确方式是通过 config/config.ts 配置主题，并让 less 编译时读取：
- 在
config/config.ts的theme字段中定义：{ 'primary-color': '#ff6b35' } - 确保
src/themes/index.less（如有）或global.less中没有重复声明@primary-color - 若需在 less 中复用该值，用
@import '~@ant-design/pro-layout/es/theme';引入变量，而非手写
自定义 class 名被 hash 了，怎么精准控制
Ant Design Pro 默认开启 CSS Modules，但 global.less 是全局作用域，不会被 hash。问题通常出在：你写了自定义 class（比如 .my-header），却在组件里用了 className={styles['my-header']} —— 这时 styles 来自一个模块化 less 文件，不是 global.less。
要确保 class 生效且可预测：
- 把自定义 class 全部写进
global.less，并在 JSX 中直接写字符串：className="my-header" - 避免混用：
import styles from './xxx.module.less'和global.less同时操作同一元素 - 调试时用浏览器开发者工具看最终渲染的 class 名，确认是否被意外包裹进
ant-pro-*或css-xxx哈希名里
global.less、theme 配置、CSS Modules、运行时暗色模式类名这四层经常互相干扰。改一行样式前，先确认它究竟被哪一层接管了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
