import styles from './x.module.less' 返回空对象，是因为 webpack 未识别为 css 模块：必须同时满足文件名严格为.module.less、配置中声明lessmoduleregex且置于oneof首位、使用less-loader@7.3.0（cra v4必需）。
import styles from './X.module.less' 返回空对象？检查三要素是否齐备
这不是代码写错了，而是 Webpack 根本没把 .module.less 当作 CSS Modules 处理。必须同时满足：文件名严格为 X.module.less（不能是 X.less 或 X.modules.less）、Webpack 配置中明确定义了 lessModuleRegex = /\.module\.less$/、且该规则在 oneOf 数组中排在普通 .less 规则之前。
常见错误包括：
- 只改了文件后缀，但 Webpack 没加对应 rule —— CRA 默认不识别
.module.less - 写了
test: /\.module\.less$/，但漏掉modules: { getLocalIdent: getCSSModuleLocalIdent }，导致 css-loader 不启用模块化逻辑 - 把模块化规则放在普通
.less规则后面，结果所有.module.less先被前面的规则捕获并按全局样式处理
less-loader 版本不匹配：this.getOptions is not a function 怎么办
这个报错几乎 100% 是 less-loader@10+ 和 Webpack 4（CRA v4/v5 默认）不兼容所致。CRA v4 项目必须锁定 less-loader@7.3.0 —— 这是最后一个兼容 Webpack 4 的稳定版。
执行以下命令修复：
npm uninstall less-loadernpm install less-loader@7.3.0 --save-dev
注意：less 本身可用最新版（如 less@4.2.0），不影响 Ant Design 等依赖；但若强行升级 css-loader 到 ≥6.x（less-loader@10+ 所需），会与 CRA v4 内置的 css-loader@4.x 冲突，引发更隐蔽的 loader 链断裂。
审查 React Router 代码，确保数据加载、变更、错误处理和导航模式符合规范，适用于 React Router v6.4+ 代码、加载器及其他特性。
如何在 webpack.config.js 中正确配置两套 Less 规则
暴露配置后（npm run eject），在 webpack.config.js 头部添加正则，并插入两条互斥规则：
- 先定义：
const lessRegex = /\.less$/;和const lessModuleRegex = /\.module\.less$/; - 在
oneOf数组中，**模块化规则必须前置**：test: lessModuleRegex→use中调用getStyleLoaders，且importLoaders: 2（支持@import和变量解析），modules对象里显式写getLocalIdent: getCSSModuleLocalIdent - 再写普通规则：
test: lessRegex+exclude: lessModuleRegex→ 必须加sideEffects: true，否则生产构建可能把全局样式 tree-shake 掉
漏掉 sideEffects: true 是上线后样式消失的高频原因，尤其在引入 Ant Design 全局样式时。
Ant Design 或 dva 项目中，calc()、背景图路径失效怎么解
Less 编译器会主动解析 calc() 里的表达式，导致 calc(100% - 10rem) 被误编译成 calc(100% - 10%)；CSS Modules 下相对路径也会因模块化作用域丢失上下文。
解决方式很直接：
-
calc()：改用转义语法 →calc(~"100% - 10rem")或calc(～'100% - 10rem') - 背景图路径：避免
./img.png，改用~"url(./img.png)"（dva 官方推荐）或向上跳级写法../components/img.png - 绝对路径（如
/public下资源）不受影响，可继续用url(/img.png)
这些不是配置问题，而是 Less 编译器和 CSS Modules 作用域叠加后的固有行为，绕不开，只能按规范写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
