webpack处理less必须配置['style-loader', 'css-loader', 'less-loader']链，less-loader编译源码，css-loader解析依赖，style-loader注入dom；开发用style-loader支持热更新，生产需换minicssextractplugin.loader抽离css，并配合postcss-loader与browserslist实现兼容性。
Webpack本身只认识JavaScript，处理CSS、Less这类文件必须靠Loader链配合。关键不是装对包，而是顺序对、分工清、环境分得明。
基础依赖和安装
每种样式语言对应一套必要依赖，漏一个都跑不起来：
- CSS：必须装
style-loader和css-loader - Less：额外装
less-loader和less（less是运行时依赖，不是 Loader，但缺它会报错） - SCSS/Sass：装
sass-loader和node-sass或sass（推荐后者，更现代）
Loader执行顺序不能错
Webpack里 use 数组从右往左执行，也就是“最后写的先干活”。这个顺序决定整个链条是否成立：
-
Less 文件正确链（开发环境）：
['style-loader', 'css-loader', 'less-loader'] -
less-loader最先运行：把.less源码（含变量、嵌套、@import）编译成纯 CSS 字符串 -
css-loader接着处理：解析 CSS 中的url()、@import './xxx.css'等，转成模块依赖 -
style-loader最后执行：把处理好的 CSS 注入<style></style>标签，实时生效 - 漏掉
css-loader或顺序颠倒（比如写成['style-loader', 'less-loader']），就会报You may need an appropriate loader
开发与生产环境必须区分
同一个 .less 文件，在不同环境下要用不同的 Loader 结尾：
-
开发环境用
style-loader：支持热更新，样式改完立刻看到效果 -
生产环境必须换
MiniCssExtractPlugin.loader：把 CSS 抽成独立.css文件，才能被 CDN 缓存、被压缩插件处理、避免 JS 包体过大 - 生产配置示例：
[MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'less-loader'] - 注意：
postcss-loader必须放在css-loader之后、less-loader之前——它处理的是 less-loader 输出的 CSS，不是原始 Less 源码
兼容性和优化靠 postcss，不是 less-loader
less-loader 只做编译，不加前缀、不降级、不压缩。真正控制最终 CSS 兼容性的，是 postcss-loader 加 postcss-preset-env，而它们的行为由 browserslist 决定：
- 在
package.json里配好browserslist字段，例如："browserslist": ["> 1%", "last 2 versions"] - 装
postcss-loader和postcss-preset-env - 确保
postcss-loader在css-loader后、less-loader前 - 没配
browserslist或没装postcss-preset-env，display: flex就不会自动补-webkit-前缀
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
