import styles from './X.module.less' 返回空对象，根本原因是构建工具未识别该文件为 CSS Modules：CRA 默认仅支持 .module.css，需手动配置 Webpack 规则匹配 /.module.less$/ 并启用 css-loader modules；Vite 虽开箱即用，但要求文件名严格为 .module.less 且必须默认导入。
import styles from './X.module.less' 返回空对象，不是代码写错了，而是 Webpack 根本没走 CSS Modules 流程——CRA 默认不认 .module.less，Vite 虽开箱即用但对文件名和导入方式极其敏感。
为什么 import styles from './X.module.less' 返回空对象？
核心原因就一条：Webpack（或构建工具）没把该文件识别为 CSS Modules 文件。CRA 默认只处理 .module.css，对 .module.less 完全无视；Vite 虽支持，但一旦文件名拼错（比如 X.modules.less 或 X.modle.less）、或用了命名导入（import { button } from './X.module.less'），也会静默失败。
- 文件名必须严格为
X.module.less（不能少字母、不能多 s、不能大小写错） - CRA 项目必须手动添加 Webpack 规则匹配
/\.module\.less$/，且排在普通.less规则之前 - Vite 项目无需改配置，但控制台若报
Failed to load resource，90% 是路径或扩展名写错了 - 使用
craco或react-app-rewired时，要确认addLessLoader是否透传了modules配置，否则照样返回空对象
CRA 中必须满足的三个硬性条件
缺一不可，漏掉任意一条，styles 就是空对象，className={styles.xxx} 渲染出来就是 undefined。
- 文件名严格为
X.module.less（注意是module，不是modules） - Webpack 配置中存在
test: /\.module\.less$/的规则，且在oneOf数组里排在普通.less规则前面 - 该规则的
css-loader配置必须显式启用模块化：modules: { getLocalIdent: getCSSModuleLocalIdent }，不能只写modules: true
常见错误：配置里还留着已废弃的 lessOptions 字段（尤其从旧 craco 配置拷贝来的），它在 less-loader@7.3.0 下会静默失效。
立即学习“前端免费学习笔记（深入）”；
less-loader 版本踩坑：this.getOptions is not a function
这是 CRA v4（Webpack 4）项目的典型报错，本质是 less-loader@10+ 和 Webpack 4 不兼容。CRA v4 默认用 css-loader@4.x，而新版 less-loader 要求 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），不影响 Ant Design 等库 - 如果用了
craco-less，确认其底层调用的less-loader版本是否被覆盖
Vite 中只需两件事，但极易手滑
Vite 对 CSS Modules 是开箱即用的，包括 Less，不需要动任何构建配置——前提是别在细节上翻车。
- 文件必须命名为
xxx.module.less（不是xxx.less，也不是xxx.modules.less） - 导入必须用默认导入：
import styles from './Button.module.less'，不能解构、不能命名导入 - 编译后类名类似
button__3x7a9是正常行为，不是 bug - 样式不生效？先看控制台有没有 404 报错——路径写错、扩展名拼错（比如
.modle.less）、或大小写不一致（macOS 不敏感，Linux/CI 敏感）都可能导致加载失败
真正容易被忽略的是：Vite 的 HMR（热更新）有时不会及时反映 .module.less 的类名变更，改完建议手动刷新页面确认渲染结果。
