Autoprefixer必须在Sass编译后运行,因其是PostCSS插件,只处理编译后的CSS字符串,不读.scss源码;正确流程为sass→CSS→postcss+autoprefixer→终版CSS。

因为 Sass 本身根本不加前缀——它连 browserslist 都不读,更不会查 Can I Use 数据。所谓“编译后没补全”,其实是压根没让 Autoprefixer 运行。
Autoprefixer 根本不和 Sass 打交道
你写的 @mixin flex 或手写 -webkit-display,Sass 编译器只做字符串替换,它不知道 iOS Safari 12.4 需要 -webkit-box,也不知道 place-items 在 Safari 14.1 下压根不支持。Autoprefixer 是独立的 PostCSS 插件,只扫描 Sass 编译完成后的纯 CSS 字符串,不是 .scss 源码。
常见错误现象:
- 开发时看到前缀,打包后没了 → 构建流程里 CSS 没走 PostCSS
-
display: flex在 iOS Safari 9 不生效 →postcss-loader没配在css-loader之后,或importLoaders小于 1 - VSCode 里按 Ctrl+Shift+P 跑 Autoprefixer 没反应 → 当前文件不是
.css或.scss,或没装本地postcss和autoprefixer
Webpack 项目里前缀“消失”的三个关键断点
链路必须是:sass-loader → css-loader → postcss-loader,缺一不可。
立即学习“前端免费学习笔记(深入)”;
-
postcss-loader必须在css-loader之后,否则收不到编译后的 CSS -
css-loader的importLoaders至少为1,否则@import 'xxx.scss'引入的样式不进 PostCSS -
postcss.config.js必须被真实加载:在里面写require('nonexistent'),启动构建报错才说明配置生效;不报错 = 文件根本没读到
browserslist 配置不对,加了也白加
Autoprefixer 加不加前缀、加哪些,100% 取决于 browserslist 输出的实际浏览器列表,和你写的 CSS 内容无关。
- 模糊写法如
"last 2 versions"会导致给 Chrome 125 加-webkit-,毫无意义 - 国内项目别只信
> 1%:iOS 15.0 全球占比仍超 1%,但它在部分 iPhone 上对aspect-ratio支持不稳定,得显式写"iOS >= 16.4" - 运行
npx browserslist确认输出里真有你要覆盖的机型,比如ios_saf 16.4、and_uc 14.4 - 别在
postcss.config.js里用browsers参数覆盖,它已被废弃,优先级低于browserslist
VSCode 插件补全失败,多数是环境没配齐
VSCode 的 mrmlnc.vscode-autoprefixer 插件只是调用本地 CLI,不是魔法开关。
- 必须在项目根目录执行
npm install -D postcss autoprefixer(全局安装无效) - 必须有
postcss.config.js,哪怕内容只是module.exports = { plugins: [require('autoprefixer')] }; - 手动触发命令时,光标必须落在 CSS 规则内部(比如在
flex两个字符之间),且文件后缀要是.css、.scss或.pcss -
.vue单文件组件里的<style>块默认不支持,需改用<style lang="postcss">或靠构建工具处理
最容易被忽略的是:你改了 browserslist,但没重新启动开发服务器,或者没清构建缓存——Autoprefixer 不会热更新配置,它只在每次 CSS 流经时查一次表。


















