webpack需less-loader将.less转css，但必须配合css-loader处理依赖（如@import、url），且顺序为['style-loader', 'css-loader', 'less-loader']；漏掉css-loader或顺序错误会报“you may need an appropriate loader”；less-loader仅编译，不加前缀、不分离、不压缩，兼容性由postcss-loader+browserslist控制。
Webpack 本身不认 .less 文件，必须靠 less-loader 编译，但光装它还不够——漏掉 css-loader 或顺序错，打包直接报错：You may need an appropriate loader to handle this file type。
less-loader 必须和 css-loader 配合使用
less-loader 只做一件事：把 .less 源码（含变量、嵌套、@import）转成纯 CSS 字符串；但它不解析 url()、@import './xxx.css' 这类语法。这些依赖关系得由 css-loader 处理，否则后续的 style-loader 或 MiniCssExtractPlugin.loader 拿不到合法模块输入。
- 错误写法：
['style-loader', 'less-loader']→ 缺css-loader，报错 - 正确顺序（从右往左执行）：
['style-loader', 'css-loader', 'less-loader'] -
less-loader必须在最右边，它是整个链条的起点
开发 vs 生产环境 loader 链不能混用
开发时用 style-loader 把 CSS 注入 <style></style> 标签，支持热更新；生产环境必须换 MiniCssExtractPlugin.loader，否则 CSS 会死死捆在 JS 里，没法独立缓存、没法被压缩插件处理。
- 开发配置：
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 决定最终 CSS 兼容性，不是 less-loader
less-loader 不加前缀、不降级，它输出的就是你写的语法（比如 display: flex）。真正控制兼容性的，是 postcss-loader + postcss-preset-env，而后者读取的是 package.json 里的 browserslist 字段。
- 没配
browserslist，或写成"> 1%"但没装postcss-preset-env，CSS 就不会自动加-webkit-前缀 - 错误顺序：
['css-loader', 'postcss-loader', 'less-loader']→postcss-loader去处理未编译的 less 文本，直接崩溃 - 兼容性逻辑链：
less → css → postcss → 最终 CSS
less-loader 的 lessOptions 容易被忽略的细节
想让 less-loader 支持自定义函数、插件或严格模式，得通过 lessOptions 传参，不是直接写 options。
- 正确写法：
{ loader: 'less-loader', options: { lessOptions: { strictMath: true } } } - 错误写法：
{ loader: 'less-loader', options: { strictMath: true } }→ 参数被忽略 - 常见需求：启用
javascriptEnabled: true才能用内联 JS 表达式（如width: unit(100px / 2, px)）
最容易卡住的地方不是少装包，而是 loader 顺序错、css-loader 漏掉、或者以为 less-loader 自己能搞定兼容性——它只编译，其余全是上下游的事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
