webpack需通过loader链将.less文件编译为css：必须同时安装less和less-loader，按['style-loader', 'css-loader', 'less-loader']逆序配置，缺一或顺序错误均导致构建失败。
Webpack 本身不识别 .less 文件，必须靠 Loader 链把它们“翻译”成浏览器能执行的 CSS。光装对包不够，顺序错、环境不分、依赖漏掉，都会直接报错，比如 You may need an appropriate loader 或 Cannot find module 'less'。
less-loader 必须和 less 一起装，缺一不可
less-loader 是个“翻译员”，但它自己不带编译引擎；真正把 @variable、嵌套、@import 变成 CSS 的是 less 这个运行时库。只装 less-loader 不装 less，构建时就会崩。
- 正确安装（推荐用最新稳定版，2026 年主流是
less@4.2.x+less-loader@11.x）：npm install --save-dev less-loader less
- 如果项目里用了 Webpack Dev Server v4+，
less-loader@8+是安全的；但若还在用老版本 dev-server，可能得锁less-loader@7—— 否则会报Module build failed: TypeError: this.getOptions is not a function - 别用
yarn add -D less却漏掉less-loader，也别反过来——两者必须同时存在，且版本兼容（查 less-loader 官方兼容表）
Loader 链顺序不能颠倒：从右往左执行
Webpack 的 use 数组是**逆序执行**的：最右边的 loader 先干活。写成 ['style-loader', 'css-loader', 'less-loader'] 才对；写成 ['less-loader', 'css-loader', 'style-loader'] 就会失败。
-
less-loader：接收.less源码，输出纯 CSS 字符串（含变量展开、嵌套扁平化） -
css-loader：解析输出里的url()、@import './xxx.css'，转成 JS 模块依赖（否则图片路径、引入文件全 404） -
style-loader：把最终 CSS 注入<style></style>标签，支持热更新 - 漏掉
css-loader？url(./img.png)会原样保留，变成无效路径；漏掉style-loader？CSS 编译了但页面没样式
开发 vs 生产必须换 loader，否则打包出错或性能差
开发阶段用 style-loader 没问题；但生产构建时还用它，会导致 CSS 被塞进 JS 包里，JS 体积暴增、无法被 CDN 缓存、首屏渲染更慢。
- 生产环境必须换成
MiniCssExtractPlugin.loader：[MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'less-loader']
-
postcss-loader要放在css-loader之后、less-loader之前——它处理的是less-loader输出的 CSS，不是原始 Less - 没配
browserslist或没装postcss-preset-env，display: flex就不会自动加-webkit-前缀，iOS 12 等旧设备直接失效 - 忘记在 webpack 配置里 new
MiniCssExtractPlugin()插件？构建会成功，但 CSS 文件根本不会生成
自定义主题变量要传给 less-loader，不是 css-loader
Less 的 @primary-color 这类变量，必须由 less-loader 解析，css-loader 和 style-loader 完全不认。
- 配置示例（webpack.config.js）：
use: [{ loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'less-loader', options: { lessOptions: { modifyVars: { '@primary-color': '#1DA57A' }, javascriptEnabled: true } } }] -
javascriptEnabled: true必须开——否则@import动态路径、if()函数等高级语法会报错 - 变量名写错（比如
'@primary_color'少个横线）、拼错大小写，Less 编译器不会报错，但变量不生效，调试时容易卡住
最容易被忽略的是：loader 链里每个环节的职责边界非常清晰，less-loader 不管兼容性、css-loader 不管注入方式、postcss-loader 不管预处理语法——混用或跳过任意一环，问题往往不会立刻报错，而是表现为样式丢失、路径 404、前缀缺失、热更新失效，排查起来特别绕。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
