less-loader仅负责Less到CSS的编译，不处理前缀、压缩、分离等自动化；lessOptions只控制Less解析行为（如javascriptEnabled、strictMath），不能替代postcss-loader或MiniCssExtractPlugin。
less-loader 本身不处理 CSS 自动化（如前缀、压缩、分离），它只负责把 Less 编译成 CSS；自动化必须靠其他 loader 或插件配合，且 lessOptions 仅控制 Less 编译行为，不能替代 PostCSS 或 MiniCssExtractPlugin。
less-loader 的 lessOptions 能做什么、不能做什么
lessOptions 是传给 Less 引擎的配置项，影响的是变量解析、语法严格性、路径解析等编译阶段逻辑，和“CSS 自动化”无关。比如 strictMath: true 会要求数学运算必须用括号，relativeUrls: false 会影响 @import 中相对路径的解析方式。
- 能控制 Less 解析行为：启用/禁用 JavaScript 表达式（
javascriptEnabled）、是否允许空规则（strictUnits） - 不能添加浏览器前缀 —— 这是
postcss-loader+autoprefixer的事 - 不能分离 CSS 文件 —— 这是
MiniCssExtractPlugin.loader替换style-loader的事 - 不能压缩 CSS —— 这是
css-minimizer-webpack-plugin或生产模式下css-loader的minimize选项的事
为什么直接在 use 数组里写 "less-loader" 容易出错
Webpack 5+ 默认不接受字符串形式的 loader 配置（尤其当你需要传 lessOptions 时），必须显式写成对象形式，否则 lessOptions 会被忽略。
- 错误写法：
use: ["style-loader", "css-loader", "less-loader"]→lessOptions完全无效 - 正确写法：
{ loader: "less-loader", options: { lessOptions: { javascriptEnabled: true } } } - 若用函数式
lessOptions，loaderContext 可读取文件路径、环境变量，适合按入口动态开关 strict 模式
常见报错：Module build failed: Variable @xxx is undefined
这是 Less 编译时报的错误，不是 webpack 配置问题。根源通常是：
立即学习“前端免费学习笔记（深入）”；
- 全局变量文件（如
variables.less）没被@import，或路径写错（Less 默认不自动解析 node_modules 下的别名） -
webpackImporter未设为false，导致 Less 尝试用 Webpack 解析@import，但又没配好 resolve.alias - 用了
javascriptEnabled: false（默认值），却在变量里写了unit(10px, em)这类函数调用
临时解法是加 lessOptions: { javascriptEnabled: true }，但长期应改写为标准 Less 函数或用 math: "always"（Less 4.0+ 推荐）。
真正实现“样式自动化”的最小可行链路
要让 Less 文件最终产出带前缀、分离、压缩的 CSS，你得串起四个环节，缺一不可：
- Less 编译：
less-loader（必须带lessOptions控制基础行为） - CSS 解析：
css-loader（启用importLoaders: 2才能让 postcss-loader 处理@import进来的 CSS） - 前缀注入：
postcss-loader+autoprefixer（需配postcss.config.js或内联 plugins） - 输出分离：
MiniCssExtractPlugin.loader替换开发时的style-loader，否则 CSS 始终在 JS 里
漏掉任意一环，比如忘了在 css-loader 里设 importLoaders，那 @import "reset.css" 就不会走 postcss，前缀也就加不上 —— 这种细节最容易被忽略。
