在React项目中如何配置Less以处理CSS模块化？-css教程-PHP中文网

import styles from './x.module.less' 返回空对象，是因为webpack未将该文件识别为css模块：必须同时满足三要素——文件名严格为.module.less、webpack配置中声明lessmoduleregex并置于oneof规则首位、使用兼容的less-loader@7.3.0（cra v4必需），缺一不可。

在react项目中如何配置less以处理css模块化？

不能只装 less 和 less-loader 就完事，必须改 Webpack 配置，且要区分普通 .less 和模块化 .module.less 文件，否则 import styles from './index.module.less' 会返回空对象或报错。

为什么 import styles from './X.module.less' 返回空对象？

本质是 Webpack 没把 .module.less 当作模块文件处理——它被交给了普通 Less 规则，跳过了 css-loader 的 modules 流程。

Webpack 规则里没声明 /\.module\.less$/ 的匹配项
即使写了匹配，css-loader 那一环没开 modules: true 或漏传 getLocalIdent
less-loader@10+ 已废弃 lessOptions 字段，但配置里还写它，会静默失败
规则顺序错了：.module.less 规则必须放在普通 .less 规则前面（oneOf 数组中）

如何在 webpack.config.js 中正确添加两套 Less 规则？

暴露配置后（npm run eject），在 webpack.config.js 头部定义正则，并插入两条规则：

react-best-practices

重要：对 React 或 Next.js 代码的任何更改必须先阅读本技能。Vercel 工程团队的 React 与 Next.js 指南，涵盖可视化...

下载

加这两行（紧挨着 cssRegex、sassRegex）：
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
在 oneOf 数组里，先放模块化规则（test: lessModuleRegex）：
→ use 中调用 getStyleLoaders，必须含 importLoaders: 2（因为 @import 需要 less-loader 和 css-loader 共同处理）
→ modules 对象里显式写 getLocalIdent: getCSSModuleLocalIdent
再放普通规则（test: lessRegex，exclude: lessModuleRegex）：
→ 必须加 sideEffects: true，否则生产构建可能把全局样式 tree-shake 掉
→ 不启用 modules，也不传 getLocalIdent

less-loader 版本踩坑：为什么报 this.getOptions is not a function？

这是 less-loader@10+ 和 Webpack 4（CRA v4/v5 默认）不兼容的典型错误。

CRA 4.x 项目必须降级到 less-loader@7.3.0 —— 这是最后兼容 Webpack 4 的稳定版
执行：npm uninstall less-loader → npm install less-loader@7.3.0 --save-dev
less 本身可用最新版（less@4.x），不影响 Ant Design 等库
新版 less-loader 要求 css-loader ≥ 6.x，而 CRA v4 的 css-loader 是 4.x，强行升级会引发其他 loader 冲突

Ant Design 场景下如何避免样式被模块化污染？

别让 node_modules 里的 Less 文件进模块化流程，否则 antd 样式会被哈希化、失效。

普通 .less 规则里必须写 exclude: [/node_modules/]
.module.less 规则里**不能写 exclude**，否则你自己写的模块文件可能被跳过
.module.less 里慎用 @import 'variables.less' —— 会把全局变量注入当前模块，破坏隔离；改用 @import (reference) 'variables.less' 或提取为 JS 常量
动态拼 className 时注意：styles.xxx 是哈希后的字符串，不是原始类名，别直接写 className="xxx"