import styles from './X.module.less' 返回空对象，是因为Webpack未将该文件识别为CSS模块：必须同时满足三要素——文件名严格为.module.less、Webpack配置中声明lessModuleRegex并置于oneOf规则首位、使用兼容的less-loader@7.3.0（CRA v4必需），缺一不可。
不能只装 less 和 less-loader 就完事，必须改 Webpack 配置，且要区分普通 .less 和模块化 .module.less 文件，否则 import styles from './index.module.less' 会返回空对象或报错。
为什么 import styles from './X.module.less' 返回空对象？
本质是 Webpack 没把 .module.less 当作模块文件处理——它被交给了普通 Less 规则，跳过了 css-loader 的 modules 流程。
- Webpack 规则里没声明
/\.module\.less$/的匹配项 - 即使写了匹配，
css-loader那一环没开modules: true或漏传getLocalIdent -
less-loader@10+已废弃lessOptions字段，但配置里还写它，会静默失败 - 规则顺序错了：
.module.less规则必须放在普通.less规则前面（oneOf数组中）
如何在 webpack.config.js 中正确添加两套 Less 规则？
暴露配置后（npm run eject），在 webpack.config.js 头部定义正则，并插入两条规则：
- 加这两行（紧挨着
cssRegex、sassRegex）：const lessRegex = /\.less$/;const lessModuleRegex = /\.module\.less$/; - 在
oneOf数组里，先放模块化规则（test: lessModuleRegex）：
→use中调用getStyleLoaders，必须含importLoaders: 2（因为@import需要less-loader和css-loader共同处理）
→modules对象里显式写getLocalIdent: getCSSModuleLocalIdent - 再放普通规则（
test: lessRegex，exclude: lessModuleRegex）：
→ 必须加sideEffects: true，否则生产构建可能把全局样式 tree-shake 掉
→ 不启用modules，也不传getLocalIdent
less-loader 版本踩坑：为什么报 this.getOptions is not a function？
这是 less-loader@10+ 和 Webpack 4（CRA v4/v5 默认）不兼容的典型错误。
立即学习“前端免费学习笔记（深入）”；
- CRA 4.x 项目必须降级到
less-loader@7.3.0—— 这是最后兼容 Webpack 4 的稳定版 - 执行：
npm uninstall less-loader→npm install less-loader@7.3.0 --save-dev -
less本身可用最新版（less@4.x），不影响 Ant Design 等库 - 新版
less-loader要求css-loader≥ 6.x，而 CRA v4 的css-loader是 4.x，强行升级会引发其他 loader 冲突
Ant Design 场景下如何避免样式被模块化污染？
别让 node_modules 里的 Less 文件进模块化流程，否则 antd 样式会被哈希化、失效。
- 普通
.less规则里必须写exclude: [/node_modules/] -
.module.less规则里**不能写exclude**，否则你自己写的模块文件可能被跳过 -
.module.less里慎用@import 'variables.less'—— 会把全局变量注入当前模块，破坏隔离；改用@import (reference) 'variables.less'或提取为 JS 常量 - 动态拼 className 时注意：
styles.xxx是哈希后的字符串，不是原始类名，别直接写className="xxx"
真正起作用的是文件名后缀 + Webpack 规则顺序 + less-loader 版本三者共同约束，漏掉任意一个，.module.less 就只是个普通文件。
