正确顺序是['style-loader', 'css-loader', 'postcss-loader', 'less-loader'],因loader从右往左执行,须先编译Less再交由PostCSS处理;若顺序颠倒,postcss-loader将接收非法Less语法而跳过或报错。

postcss-loader 顺序写错,CSS 根本没进 Autoprefixer
Webpack 中 loader 执行顺序是从右往左,但逻辑上必须是:Less/Sass 编译 → 输出标准 CSS → PostCSS 处理 → 最终打包。如果 postcss-loader 写在 less-loader 左边(即数组中排在前面),它收到的是未编译的 Less 语法,直接跳过或报错。
- ✅ 正确顺序:
['style-loader', 'css-loader', 'postcss-loader', 'less-loader'] - ❌ 错误顺序:
['style-loader', 'css-loader', 'less-loader', 'postcss-loader'] - Vue CLI 项目需确认
<style>块是否走postcss-loader;默认只对lang="postcss"生效,普通<style>需检查vue-style-loader+css-loader链路中是否含postcss-loader - Vite 5+ 默认启用 PostCSS,但若在
vite.config.js中显式配置了css.postcss,可能意外覆盖默认行为
browserslist 配置没生效,Autoprefixer 不知道该兼容谁
Autoprefixer 加什么前缀,完全取决于 browserslist 输出的实际浏览器列表。它不看你的印象、不猜你需求,只查 npx browserslist 的结果。常见失效场景是配置写了但没被读到,或规则语义冲突。
- 优先把
browserslist字段写在package.json里,避免多处维护和路径问题 - 别用已废弃的
overrideBrowserslist参数(比如在postcss.config.js里传) - 运行
npx browserslist确认当前匹配的浏览器版本;再跑npx autoprefixer --info看哪些属性会被处理 - 示例安全写法:
"iOS >= 13", "Safari >= 14.1", "Chrome >= 90",比"last 2 versions"更可控 - 改了
.browserslistrc却没清构建缓存,或postcss-loader没读到该文件(它只认项目根目录或通过postcss.config.js显式指定)
写了手动前缀,Autoprefixer 直接放弃整条声明
Autoprefixer 的设计原则很明确:一旦看到任何带厂商前缀的声明(如 display: -webkit-flex 或 transform: -moz-transform),就认为“你已接管”,整条规则不再补任何前缀——包括本该加的 -ms- 或 -webkit-。
- 删掉所有自定义
.flex()、.transform()这类 Mixin,Less/Sass 文件里只保留标准语法:display: flex、gap: 1rem、place-content: center - @supports 块内不要写带前缀的 fallback;块外的标准声明才由 Autoprefixer 处理
- 像
backdrop-filter这种 Safari 仍只认-webkit-backdrop-filter的属性,需手动写前缀 + 标准版,但这是特例,不是通用策略
Autoprefixer 根本没加载,postcss.config.js 形同虚设
很多项目有 postcss.config.js,但构建工具根本没读它。Autoprefixer 不是装完就自动挂载的插件,它必须被 PostCSS 实例正确 require,且该实例必须参与 CSS 处理链。
立即学习“前端免费学习笔记(深入)”;
- 在
postcss.config.js里故意require('xxx-missing-plugin'),启动构建——不报错就说明该文件根本没被加载 - Webpack 要求
css-loader的importLoaders≥ 1,否则@import的 CSS 不会进 PostCSS 流程 - 独立使用 PostCSS(如 Gulp)时,确保
gulp-postcss真正调用了autoprefixer插件,而不是只写了require('autoprefixer')却没放进插件数组 - 检查
node_modules是否真装了autoprefixer(注意拼写,不是autoprofixer或autoprefix)
-webkit- 前缀 + postcss.config.js 没被读取。调试时建议从 npx browserslist 和 npx autoprefixer --info 入手,先确认目标和能力边界,再逐层验证链路是否通畅。


















