如何处理CSS里Less和CSS Modules一起用时报错的问题？

import styles from './Button.module.less' 返回空对象，是因为 Webpack 未将 .module.less 识别为 CSS Modules：必须同时配置 lessModuleRegex 正则、将其规则置于 oneOf 首位、并使用 [email protected]，缺一不可。

import styles from './Button.module.less' 返回空对象、类名没哈希、样式全局污染——这不是 Less 写错了，是 Webpack 没把 .module.less 当作 CSS Modules 处理。

为什么 .module.less 不走 CSS Modules 流程

Webpack 和 Vite 默认只识别 .module.css 和 .module.scss，.module.less 必须显式配置才能接入 css-loader?modules。常见断点：

1. webpack.config.js 里没声明 lessModuleRegex = /.module.less$/
2. 该正则规则写在了普通 lessRegex 规则之后，被提前捕获、跳过模块化流程
3. less-loader 版本 >7.3.0（比如 v10+），但项目基于 CRA v4（Webpack 4），触发 this.getOptions is not a function 错误，整个链路静默失败
4. getStyleLoaders 调用时漏传 modules: { getLocalIdent: getCSSModuleLocalIdent }，或 importLoaders 不够（Less 里有 @import 时至少设为 2）

如何让 import './X.module.less' 正常返回样式对象

以 CRA eject 后的 Webpack 配置为例，三步必须同时满足：

1. 在 config 头部加：const lessModuleRegex = /.module.less$/;
2. 在 oneOf 数组最前面插入规则（顺序不能错）：

   { test: lessModuleRegex, use: getStyleLoaders( { importLoaders: 2, sourceMap: isEnvDevelopment, modules: { mode: 'local', getLocalIdent: getCSSModuleLocalIdent }, }, 'less-loader' ), }

3. 降级 less-loader 到 @7.3.0：npm install [email protected] --save-dev（CRA v4/v5 必须）

第三方库的 Less 文件被意外模块化怎么办

Ant Design 的 @import '~antd/lib/style/themes/default.less' 如果进了 .module.less 链路，变量和 mixin 全被哈希，.ant-btn 类名直接失效。解决方式很直接：

1. 确保 node_modules 路径被排除：exclude: /node_modules/ 加到 lessModuleRegex 规则里
2. 不要在 .module.less 中 @import 第三方库的完整样式文件；改用按需引入 + :global() 包裹，例如：

   .my-button { :global(.ant-btn) { margin-right: 8px; } }

3. 全局主题变量仍可放在单独的 common.less 中，用 style-resources-loader 注入，但它不能是 .module.less

最容易被忽略的是：模块规则的 exclude 必须显式写，否则 node_modules 下的 Less 文件一旦被 .module.less 引入，就会被强制模块化，哈希后所有类名、变量、mixin 全失效——不是报错，而是“看起来正常却完全不工作”。