模块隔离失败是因webpack未将.module.less识别为css modules，导致import styles返回空对象；主因包括规则缺失、顺序错误、less-loader版本不兼容及缺少less编译器。
模块隔离失败，根本不是Less写错了，而是Webpack把.module.less当成了普通Less文件处理——它压根没走CSS Modules流程。
为什么import styles from './X.module.less'返回空对象
这是最典型的症状，说明css-loader的modules逻辑完全被跳过。常见原因有：
-
webpack.config.js里根本没声明/\.module\.less$/匹配规则 - 写了规则，但
css-loader配置漏了modules: { getLocalIdent: getCSSModuleLocalIdent } -
lessModuleRegex规则排在lessRegex后面，被后者提前捕获 - 用了
less-loader@10+却还在配置里写lessOptions字段（该字段已废弃，静默失效）
如何配置两套Less规则：模块化 vs 全局
必须在webpack.config.js中显式定义并按顺序插入两条规则：
- 先加模块化规则：
test: lessModuleRegex（即/\.module\.less$/），use中调用getStyleLoaders，必须含importLoaders: 2（支持@import嵌套），且modules对象里显式写getLocalIdent: getCSSModuleLocalIdent - 再加全局规则：
test: lessRegex（即/\.less$/），exclude: lessModuleRegex，不启用modules，但必须加sideEffects: true，否则生产构建可能把全局样式删掉 - 两正则需提前定义：
const lessRegex = /\.less$/;，const lessModuleRegex = /\.module\.less$/;
第三方库（如Ant Design）的Less被意外模块化
@import '~antd/lib/style/themes/default.less'进了.module.less链路，变量、mixin全被哈希，.ant-btn类名直接失效。解决方式很直接：
- 确保
node_modules路径被排除在模块规则外：exclude: /node_modules/加到lessModuleRegex规则里 - 不要在
.module.less中@import第三方库的完整样式文件；改用按需引入 +:global()包裹，例如：:global { @import '~antd/lib/style/themes/default.less'; }
less-loader版本与this.getOptions is not a function错误
这是less-loader@10+和Webpack 4（CRA v4/v5默认）不兼容的典型报错。解决方案明确：
- CRA v4项目必须锁定
less-loader@7.3.0：npm install less-loader@7.3.0 --save-dev - CRA v5项目可尝试
less-loader@11，但需确认webpack已升级到5.x - 别在配置里写
lessOptions——less-loader@10+只认options字段，写错就静默失败
最容易被忽略的是：即使你配对了所有规则，只要less-loader没装less编译器本身（npm install --save-dev less），整个链路就会静默中断——styles还是空，但不会报错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
