根本原因是 webpack 未将 .module.less 当作 css module 处理，因规则顺序错误或 less-loader 版本不兼容（如 cra v4 需用 less-loader@7.3.0），导致 css-loader 未启用 modules，styles 返回空对象。
为什么 import styles from './X.module.less' 返回空对象？
根本原因不是 Less 语法写错了，而是 Webpack 根本没把它当 CSS Module 处理——它被普通 .less 规则捕获了，跳过了 css-loader 的 modules: true 流程。必须同时满足三个硬性条件：文件名必须是 <code>X.module.less、Webpack 配置中存在精确匹配 /\.module\.less$/ 的规则、该规则里 css-loader 显式启用了 modules 并传了 getLocalIdent。
如何让 .module.less 同时支持 CSS Modules + Less 变量？
关键在 getStyleLoaders 调用时的参数组合：模块化规则必须用 less-loader + css-loader?modules + postcss-loader 三件套，且 less-loader 的配置要能透传变量。常见错误是把 modifyVars 写在错层（比如塞进 css-loader 选项里）。
- 在
webpack.config.js的oneOf数组中，.module.less规则必须排在普通.less规则之前 -
use链里，less-loader的lessOptions必须包含javascriptEnabled: true和modifyVars，例如：{ javascriptEnabled: true, modifyVars: { '@primary-color': '#1DA57A' } } -
css-loader的options里必须有modules: { mode: 'local', getLocalIdent: getCSSModuleLocalIdent }，不能只写modules: true -
importLoaders: 2是底线值——因为@import语句需要less-loader和css-loader共同解析
less-loader@10+ 为什么报 this.getOptions is not a function？
这是 Webpack 4（CRA v4/v5 默认）和 less-loader@10+ 不兼容的静默崩溃。错误发生时，Webpack 4 的 loader API 不识别新版本的 getOptions 方法，导致整个 less-loader 初始化失败，进而让 css-loader 拿不到有效样式内容，最终 styles 对象为空。
- CRA v4 项目必须锁定
less-loader@7.3.0：npm uninstall less-loader && npm install less-loader@7.3.0 --save-dev -
less本身可用最新版（如less@4.2.0），不影响 Ant Design 等依赖 - 如果误装了
less-loader@10+，即使lessOptions写对了，也会完全失效——没有报错提示，只有空对象
全局变量怎么注入到所有 .module.less 文件？
不能靠 @import 手动引入每个文件，那样违背模块化初衷。正确方式是通过 less-loader 的 additionalData 选项（v7.3.0 支持）或 modifyVars 预设变量。后者更轻量，适合主题色、间距等常量。
- 用
modifyVars注入基础变量：modifyVars: { '@primary-color': '#1DA57A', '@border-radius-base': '4px' } - 若需注入完整变量文件（如
variables.less），改用additionalData（注意路径必须是绝对路径）：additionalData: `@import "${path.resolve(__dirname, '../src/variables.less')}";` - 避免在
additionalData中写@import '~antd/lib/style/themes/default.less'这类别名路径——Webpack 别名在less-loader层不生效，会报File not found
modifyVars 写得再准，只要 .module.less 规则排在普通 .less 规则后面，或者 less-loader 版本错配，就注定返回空对象。这不是配置遗漏，是 pipeline 断在了第一环。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
