如何在Webpack中配置Less处理CSS？-css教程-PHP中文网

webpack处理less需loader链协同：开发用['style-loader', 'css-loader', 'less-loader']（右→左执行），生产换minicssextractplugin.loader；必装less、postcss-loader及browserslist，且postcss-loader须紧邻css-loader之后。

如何在webpack中配置less处理css？

Webpack本身不识别.less文件，必须靠 Loader 链协同工作；装对包只是第一步，顺序错、环境不分、依赖漏掉，都会直接报You may need an appropriate loader。

Less Loader链必须按顺序写对

less-loader只负责把.less源码编译成 CSS 字符串，它不解析@import或url()，也不注入页面——这些事分别由css-loader和style-loader干。

开发环境正确顺序：['style-loader', 'css-loader', 'less-loader']（从右往左执行）
漏掉css-loader：所有@import './xxx.css'或background: url(./img.png)会失效，报模块找不到
把style-loader写在中间或最后：CSS不会插入 DOM，页面白屏无样式
less本身是运行时依赖，不是 Loader，但没装它，less-loader启动就崩，报Cannot find module 'less'

开发用`style-loader`，生产必须换`MiniCssExtractPlugin.loader`

热更新靠style-loader把 CSS 打进 JS 里动态插入<style></style>，但上线后这样会拖慢首屏、无法 CDN 缓存、JS 包体积虚高。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

开发配置：{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }
生产配置：{ test: /\.less$/, use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'less-loader'] }
postcss-loader必须紧挨css-loader之后、less-loader之前——它处理的是less-loader输出的纯 CSS，不是原始 Less 源码
如果还用extract-text-webpack-plugin（已废弃），打包会失败，Webpack 5+ 只认MiniCssExtractPlugin

兼容性靠`postcss-loader` + `browserslist`，不是`less-loader`

less-loader只做语法编译，加前缀、降级、压缩全不归它管。真正决定最终 CSS 能不能在 IE11 或旧安卓上跑的，是postcss-loader的行为。

必须装postcss-loader和postcss-preset-env（不是autoprefixer单插件就够）
browserslist字段得写在package.json里，例如："browserslist": ["> 1%", "last 2 versions", "not dead"]
没配browserslist，display: flex不会自动补-webkit-前缀，哪怕postcss-loader装了也白搭
css-loader的importLoaders选项要设为1或更高，否则@import进来的 CSS 不经过postcss-loader