less-loader单独配置会报错，因为它只将.less编译为CSS字符串，不处理@import/url()等依赖；必须配合css-loader解析路径依赖、style-loader注入DOM，且顺序必须为['style-loader','css-loader','less-loader']。
Webpack 默认完全不认识 .less 文件，光装 less-loader 不会生效，必须配齐三件套并严格控制顺序。
为什么 less-loader 单独配置会报错？
less-loader 只负责把 .less 源码（含变量、嵌套、@import）转成纯 CSS 字符串；它不解析 url()、@import './xxx.css' 这类依赖声明。这些工作由 css-loader 完成——它把 CSS 中的资源路径转成模块引用，再交给 style-loader 注入 DOM。
- 漏掉
css-loader→ 报错You may need an appropriate loader to handle this file type - 顺序写成
['style-loader', 'less-loader']→less-loader输出的 CSS 没被css-loader处理，url()和@import全部失效 - 正确顺序（从右往左执行）：
['style-loader', 'css-loader', 'less-loader']
开发和生产环境的 loader 链不能混用
开发时用 style-loader 是为了支持热更新；生产时必须换 MiniCssExtractPlugin.loader，否则 CSS 会打包进 JS，无法独立缓存、压缩或 CDN 分发。
- 开发配置：
use: ['style-loader', 'css-loader', 'less-loader'] - 生产配置：
use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'less-loader'] -
postcss-loader必须在css-loader之后、less-loader之前——它处理的是less-loader输出的 CSS，不是原始 less 源码 -
browserslist决定最终兼容性，不是less-loader；它靠postcss-preset-env读取
模块化 Less（.module.less）要单独配规则
Webpack 不会自动识别 .module.less 为 CSS Modules，必须拆开两条规则，并保证模块化规则排在普通规则前面（oneOf 下顺序敏感）。
立即学习“前端免费学习笔记（深入）”；
- 定义两个正则：
const lessRegex = /\.less$/和const lessModuleRegex = /\.module\.less$/ -
lessModuleRegex规则中：css-loader必须启用modules: { getLocalIdent: getCSSModuleLocalIdent } -
lessRegex规则中：加sideEffects: true，否则生产构建可能删掉全局样式 - 两条规则都要
exclude: /node_modules/，避免 Ant Design 等库的.less被误处理
常见踩坑点汇总
很多问题不是配置逻辑错，而是细节没对上：
-
test: /\.less\?$/或漏$→ 匹配到index.less.map等文件，loader 不触发 - 入口 JS 没
import './xxx.less'，只用<link>引入 → HMR 完全失效 - 用了 Webpack 4 +
less-loader@10+→ 报this.getOptions is not a function，必须降级到less-loader@7.3.0 - 路径别名（如
@/styles）没在resolve.alias里配 → import 解析失败，loader 根本不跑 - 改了 loader 配置但没清
node_modules/.cache/webpack→ 持久化缓存导致行为诡异
