结论：不能只装less和less-loader，必须配置webpack两套规则——普通.less（含sideeffects: true）和.module.less（启用css-loader modules及getlocalident），并严格排除node_modules；less-loader需降级至@7.3.0以兼容webpack 4，否则报this.getoptions错误。
直接说结论：不能只装 less 和 less-loader 就完事，必须改 Webpack 配置，且要区分普通 Less 文件和模块化 Less 文件（即 .module.less），否则 import styles from './xxx.module.less' 会返回空对象或报错。
为什么 import styles from './index.module.less' 返回空对象？
这是最常见的现象，本质是 Webpack 没识别出 .module.less 文件该走 CSS Modules 流程。Create React App 默认只对 .module.css 启用模块化，对 .module.less 完全无视——哪怕你装了 less-loader。
- Webpack 规则里没声明
/\.module\.less$/的匹配项 - 即使写了匹配，
css-loader那一环没开启modules: true或没传getLocalIdent - 用了新版
less-loader@10+，但配置里还写lessOptions—— 这个字段在 v10+ 已废弃，会静默失败
如何正确配置 less-loader + CSS Modules？
核心是两套规则并存：一套处理普通 .less（全局样式），一套处理 .module.less（模块化）。推荐用 eject 后改 webpack.config.js，因为 craco 等工具在复杂场景下容易漏掉 getStyleLoaders 中的 modules 参数传递。
- 在
webpack.config.js头部定义正则：const lessRegex = /\.less$/;和const lessModuleRegex = /\.module\.less$/; - 在
oneOf数组里插入两条规则（顺序不能错，模块化规则要放在普通规则前面）： - 模块化规则中，
css-loader必须显式启用modules: { getLocalIdent: getCSSModuleLocalIdent }；less-loader不需要额外 options（除非你要改 less 变量） - 普通 Less 规则里，
sideEffects: true必须加上，否则生产构建可能把全局样式 tree-shake 掉
less-loader 版本踩坑：别用 @10.x
如果你看到错误：TypeError: this.getOptions is not a function，基本就是 less-loader@10+ 和老版 css-loader / Webpack 4 不兼容。CRA 4.x（常见于未升级项目）默认用 Webpack 4，此时必须降级：
- 卸载：
npm uninstall less-loader - 重装指定版本：
npm install less-loader@7.3.0 --save-dev（@7.x是最后兼容 Webpack 4 的稳定版） -
less本身用最新版没问题，less@4.x完全兼容
Ant Design 场景下怎么避免样式被模块化污染？
如果你同时用 Ant Design，千万别把 node_modules 里的 .less 也塞进模块化流程——否则 Button 等组件样式会失效。关键在 exclude 条件：
- 模块化规则的
test写lessModuleRegex，exclude加上/node_modules/ - 普通 Less 规则的
test保持lessRegex，但exclude也要排除node_modules，否则 antd 的antd.less会被当成模块处理 - 如果 antd 样式仍不生效，检查是否漏掉了
import 'antd/dist/reset.css'或import 'antd/dist/antd.less'（后者需确保路径正确且未被模块化拦截）
真正麻烦的不是配置本身，而是 Webpack 规则的优先级和 exclude 范围——写错一个斜杠或少一个取反逻辑，就可能导致部分样式走错 pipeline。建议改完立刻用 console.log(styles) 验证模块化文件是否导出类名，再看浏览器元素上渲染的 class 是否带 hash 后缀。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
