如何在Webpack中配置less-loader以支持CSS模块化开发？

import styles from ‘./Button.module.less’ 返回空对象是因为 CRA 默认不识别 .module.less，需手动配置 Webpack 区分普通 less 与模块化 less 规则，并确保 css-loader 启用 modules 且 less-loader 降级至 v7.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-loader，只要 Webpack 规则里没写 /.module.less$/，它就当普通文件走默认流程，css-loader 不开 modules，自然返回空对象。

常见表现：

• 控制台无报错，但组件样式不生效、styles 是空对象
• 直接 import './Button.less' 能生效，但模块化导入失效
• 用 craco 或 react-app-rewired 改配置时，getStyleLoaders 里漏传 modules: true

Webpack 配置必须分两套规则：普通 .less 和 .module.less

不能只写一条 /.less$/ 规则覆盖全部，必须显式拆开，且模块化规则要放在普通规则前面（oneOf 顺序敏感）。

关键点：

立即学习“前端免费学习笔记（深入）”；

• 定义两个正则：const lessRegex = /.less$/; 和 const lessModuleRegex = /.module.less$/;
• lessModuleRegex 规则中：css-loader 必须带 modules: { getLocalIdent: getCSSModuleLocalIdent }，less-loader 不需要额外 options
• lessRegex 规则中：sideEffects: true 必须加上，否则生产构建可能把全局样式删掉
• 两条规则都要 exclude: /node_modules/，尤其避免 Ant Design 的 .less 被误入模块化流程

less-loader@10+ 在 Webpack 4 下会报 this.getOptions is not a function

CRA 4.x 及多数未升级项目仍用 Webpack 4，而 less-loader@10+ 已移除 this.getOptions() 方法，与老版 css-loader 冲突。

解决方式只有降级：

• 卸载：npm uninstall less-loader
• 重装：npm install less-loader@7.3.0 --save-dev（这是最后兼容 Webpack 4 的稳定版）
• less 本身可用 @4.x，不影响 Ant Design 5.x

别信“加 legacy 字段就能兼容”的说法——那是徒劳的。

lessOptions 只管 Less 编译，不管 CSS 自动化

less-loader 的 lessOptions（如 javascriptEnabled: true、strictMath: true）只影响变量解析、路径处理、数学运算等编译阶段行为，和 CSS 后处理完全无关。

常见误解与对应方案：

• 想加浏览器前缀 → 要配 postcss-loader + autoprefixer，不是 lessOptions
• 想分离 CSS 文件 → 要用 MiniCssExtractPlugin.loader 替换 style-loader，不是 lessOptions
• 想压缩 CSS → 开启 css-minimizer-webpack-plugin 或 css-loader 的 minimize 选项，不是 lessOptions
• 报错 Variable @primary-color is undefined → 检查 @import 路径或是否漏设 webpackImporter: false，不是调高 lessOptions 版本

真正容易被忽略的是：Webpack 5+ 要求 loader 配置必须是对象形式，use: ["less-loader"] 会静默忽略 lessOptions，必须写成 { loader: "less-loader", options: { lessOptions: { ... } } }。