cra中import styles from './x.module.less'返回空对象，因默认不支持.module.less；需文件名严格匹配、webpack配置匹配/.module.less$/且排在普通less规则前、css-loader启用modules并指定getlocalident。
import styles from './X.module.less' 返回空对象
这是最常遇到的问题，不是代码写错了，而是 Webpack 根本没把 .module.less 当作 CSS Modules 处理。Create React App（CRA）默认只识别 .module.css，对 .module.less 完全无视——哪怕你装了 less 和 less-loader。
必须同时满足三个硬性条件：
-
文件名严格为 X.module.less（不能是X.less或X.modules.less） - Webpack 配置中存在明确匹配
/\.module\.less$/的规则，且该规则在oneOf数组中排在普通.less规则之前 - 该规则的
css-loader配置里显式启用modules: { getLocalIdent: getCSSModuleLocalIdent }，不能只写modules: true
漏掉任意一条，styles 就是空对象，className={styles.xxx} 渲染出来就是 undefined。
less-loader 版本不兼容导致 this.getOptions is not a function
这个错误几乎专属于 CRA 4.x（Webpack 4）项目升级或误装了新版 less-loader。CRA v4 默认用 css-loader@4.x 和 Webpack 4，而 less-loader@10+ 要求 css-loader@6+ 和 Webpack 5+，二者直接不兼容。
解决方案非常明确：
- 执行
npm uninstall less-loader - 安装兼容版本：
npm install less-loader@7.3.0 --save-dev（这是最后支持 Webpack 4 的稳定版） - 确保
less本身可用最新版（如less@4.2.0），它和less-loader@7.3.0兼容良好
如果配置里还留着已废弃的 lessOptions 字段（常见于从旧 craco 配置拷贝来的代码），也会静默失败，必须删掉。
Vite 中无需额外配置，但文件名和导入方式不能错
Vite 对 CSS Modules 是开箱即用的，包括 Less。不需要改任何构建配置，但有两个关键点极易出错：
- 文件必须命名为
xxx.module.less（不是xxx.less，也不是xxx.modules.less） - 导入时必须用默认导入：
import styles from './Button.module.less'，不能用命名导入或解构 - 编译后类名是类似
button__3x7a9这样的格式，这是正常行为，不是 bug
如果你在 Vite 里看到样式没生效，优先检查控制台是否有 Failed to load resource 报错——大概率是路径写错了，或者文件扩展名拼写错误（比如写成 .modle.less）。
Ant Design 等第三方库的样式被意外模块化
当你给所有 .less 文件都加了模块化规则，又没排除 node_modules，就可能把 antd 的样式也“模块化”掉。结果是 Button 组件没样式、图标不显示、全局变量（如 @primary-color）失效。
正确做法是在模块化规则中显式排除：
- Webpack：在
test: /\.module\.less$/规则里加exclude: /node_modules/ - Craco：在
modifyLessRule回调中设置lessRule.exclude = /node_modules|antd\.css/ - Vite：默认已排除
node_modules，不用额外处理
另一个容易忽略的点：普通全局 .less 文件（非 .module.less）必须加 sideEffects: true，否则生产构建时会被 tree-shaking 掉，整个主题样式消失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
