import styles from './button.module.less' 返回空对象是因为 cra 默认不识别 .module.less，需手动配置 webpack 规则：显式添加 lessmoduleregex 规则并启用 css-loader modules 及 getcssmodulelocalident，同时降级 less-loader 至 @7.3.0 以兼容 webpack 4。
为什么 import styles from './Button.module.less' 返回空对象
不是 less-loader 没装对，而是 Webpack 根本没把 .module.less 当作模块文件走 CSS Modules 流程。Create React App 默认只识别 .module.css，对 .module.less 完全无视——哪怕你装了 less 和 less-loader，只要规则里没写 /\.module\.less$/，它就按普通样式处理，css-loader 不开 modules，自然返回空对象。
常见表现包括：
- 控制台无报错，但组件内
className={styles.xxx}渲染为空字符串 -
import './Button.less'能生效，import './Button.module.less'却无效 - 用
craco改配置时，getStyleLoaders里漏传modules: true或getLocalIdent
必须分两套 Webpack 规则：普通 .less 和 .module.less
不能只写一条 /\.less$/ 规则覆盖全部，oneOf 数组中必须显式拆开，且模块化规则要放在普通规则前面（顺序敏感）。
在 webpack.config.js 头部定义：
const lessRegex = /\.less$/; const lessModuleRegex = /\.module\.less$/;
在 oneOf 中插入两条规则：
- 模块化规则：
test: lessModuleRegex，use中调用getStyleLoaders，必须含importLoaders: 2（因@import需less-loader+css-loader共同处理），css-loader的modules必须是对象形式：{ getLocalIdent: getCSSModuleLocalIdent } - 普通规则：
test: lessRegex，exclude: lessModuleRegex，sideEffects: true必须加上（否则生产构建可能把全局样式 tree-shake 掉），不启用modules，也不传getLocalIdent - 两条规则都要
exclude: /node_modules/，尤其避免 Ant Design 等库的.less被误入模块化流程
less-loader 版本必须锁定为 @7.3.0
如果你看到错误：TypeError: this.getOptions is not a function，基本就是 less-loader@10+ 和 Webpack 4（CRA v4/v5 默认）不兼容。这个方法已在 v10+ 移除，而老版 css-loader 还在调用它。
降级命令：
npm install less-loader@7.3.0 --save-dev
注意：
-
less-loader@7.x对应less@3.x，若项目用了less@4.x，需同步调整版本组合 - v10+ 已废弃
lessOptions字段，但配置里还写它会静默失败 - 别信“装完就能用”的说法——CRA 没暴露
.module.less的识别逻辑，eject 是最可控的方式
getCSSModuleLocalIdent 不能省，也不能手写
这个函数不是可选参数，是 CSS Modules 生成唯一类名的核心。它来自 CRA 内置工具，路径通常是 react-dev-utils/getCSSModuleLocalIdent。
引入方式（在 webpack.config.js 顶部）：
const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
如果漏掉或替换成自定义函数：
- 类名可能重复（比如多个组件都叫
title，生成相同哈希） - 热更新失效，改样式后 DOM 类名不变
- SSR 场景下客户端与服务端类名不一致，触发 hydration mismatch
真正麻烦的点不在配置本身，而在规则优先级和 loader 版本链的隐式耦合——less-loader 版本、css-loader 版本、Webpack 主版本、CRA 封装层，四者缺一不可对齐。稍有错位，就变成“看着配对了，实际没走模块流程”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
