import styles from './x.module.less' 返回空对象，根本原因是 webpack 未将文件识别为 css 模块：必须同时满足三条件——文件名严格为 .module.less、配置精确匹配 /\.module\.less$/ 的规则且置于 oneof 首位、css-loader 显式启用 modules: { getlocalident: getcssmodulelocalident } 并搭配兼容的 less-loader@7.3.0。
import styles from './X.module.less' 返回空对象，不是 Less 写错了，而是 Webpack 根本没把它当 CSS 模块处理——必须同时满足三件事：文件名严格为 .module.less、Webpack 规则里有精确匹配 /\.module\.less$/ 的条目、且该规则中 css-loader 显式启用了 modules 并传了 getLocalIdent。
为什么 import styles from './X.module.less' 总是空对象？
常见原因不是语法或路径问题，而是 Webpack 规则顺序或 loader 配置缺失：
-
lessModuleRegex规则没写，或写错正则（比如漏了转义点：/\.module\.less$/而不是/.module.less$/） - 规则写了，但排在
lessRegex后面，被普通.less规则提前捕获 -
css-loader选项里只写了modules: true，没配modules: { getLocalIdent: getCSSModuleLocalIdent } - 用了
less-loader@10+却还在lessOptions里传参——这个字段在 v10+ 已废弃，会静默失效
如何在 webpack.config.js 中加两套 Less 规则？
暴露配置后（npm run eject），在 webpack.config.js 头部定义正则，再插入两条 oneOf 规则（顺序不能颠倒）：
- 先加模块化规则：
test: lessModuleRegex（即/\.module\.less$/）
→use中调用getStyleLoaders，必须含importLoaders: 2
→css-loader的options.modules必须是对象形式：{ getLocalIdent: getCSSModuleLocalIdent } - 再加全局规则：
test: lessRegex（即/\.less$/），且exclude: lessModuleRegex
→ 不启用modules
→ 必须加sideEffects: true，否则生产构建可能把全局样式删掉
less-loader 版本不兼容导致 this.getOptions is not a function
这是 CRA v4/v5（Webpack 4）项目最典型的静默崩溃。错误发生时，less-loader@10+ 的 API 和 Webpack 4 不兼容，loader 初始化失败，后续 css-loader 拿不到样式内容，最终 styles 为空。
- CRA v4（或未升级的 v5）必须用
less-loader@7.3.0——这是最后兼容 Webpack 4 的稳定版 - 执行：
npm uninstall less-loader && npm install less-loader@7.3.0 --save-dev -
less本身可用最新版（如less@4.2.0），不影响 Ant Design 等依赖
怎样让 .module.less 支持 Less 变量和 @import？
关键在 less-loader 的配置位置和参数组合：
-
lessOptions必须写在less-loader的options里，不能塞进css-loader或其他 loader - 至少启用：
{ javascriptEnabled: true, modifyVars: { '@primary-color': '#1DA57A' } } -
importLoaders: 2是底线值——因为@import需要less-loader解析变量 +css-loader处理模块化 - 若需注入完整变量文件（如
variables.less），优先用additionalData（less-loader@7.3.0支持），而非每个文件手动@import
getLocalIdent 不能省略——它不只是“生成类名”，而是告诉 css-loader “这个文件走模块化流程”。漏掉任意一环，styles 就是空对象，而且不报错。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
