less-loader 必须与 css-loader、style-loader（开发）或 minicssextractplugin.loader（生产）配合使用，按从右到左顺序执行，且需启用 cache 和 thread 优化性能。
less-loader 必须和 css-loader、style-loader 一起用
单独配 less-loader 不会生效。Webpack 遇到 .less 文件时，需要三步链式处理：先由 less-loader 把嵌套/变量/@import 编译成纯 CSS 字符串；再由 css-loader 解析其中的 @import './xxx.css' 和 url() 路径，转成模块依赖；最后由 style-loader 把结果注入 <style></style> 标签。漏掉 css-loader，@import 会报错 Module not found；顺序写反（比如把 style-loader 放中间），直接触发 You may need an appropriate loader。
正确写法是：use: ['style-loader', 'css-loader', 'less-loader']。注意这个数组从右往左执行，less-loader 必须在最右边。
开发环境和生产环境的 loader 链不能混用
开发时用 style-loader 是为了支持 CSS 热更新（HMR）；生产环境必须换成 MiniCssExtractPlugin.loader，否则 CSS 会打包进 JS bundle，无法独立缓存、无法被压缩插件处理。
- 开发配置：
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 源码
less-loader 的缓存和线程必须显式开启
默认情况下 less-loader 是单线程、无磁盘缓存的，每次构建都重解析整个 @import 树，大型项目编译慢就卡在这儿。
必须加这两项：
-
cache: true：启用磁盘缓存，结果存在node_modules/.cache/less-loader，二次构建复用 AST -
thread: true：启用多线程（底层用worker_threads），对含大量 mixins 的文件提速明显 - 顺手关掉
sourceMap: false，除非真在调试样式映射
示例片段：
{ loader: 'less-loader', options: { lessOptions: { javascriptEnabled: true }, cache: true, thread: true, sourceMap: false } }
兼容性不是 less-loader 的事，是 postcss-loader + browserslist 的事
less-loader 只做编译，不加前缀、不降级、不处理兼容性。你写的 display: flex，它就原样输出。真正控制最终 CSS 兼容性的，是 postcss-loader 配合 postcss-preset-env，而后者读取的是 package.json 里的 browserslist 字段。
常见错误：
- 没装
postcss-preset-env，只配了postcss-loader→ 前缀不会自动加 -
browserslist写成"> 1%"但没对应装插件 → 输出仍是现代语法 - loader 顺序错成
['css-loader', 'postcss-loader', 'less-loader']→postcss-loader去处理未编译的 Less 文本，直接崩溃
最容易被忽略的一点：所有公共 mixins、变量必须收口到单一 _common.less 文件，每个业务文件顶部第一行只能是 @import "_common.less"。否则 @import 树无法做增量判断，改一行就全量重编。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
