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>块默认不支持，需改用<style lang="postcss"></style>或靠构建工具处理
最容易被忽略的是：你改了 browserslist，但没重新启动开发服务器，或者没清构建缓存——Autoprefixer 不会热更新配置，它只在每次 CSS 流经时查一次表。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
