Autoprefixer 不在 Sass 中运行，只处理编译后的 CSS；所谓“Sass 自动加前缀”是误解，实际需确保 sass → css → postcss → autoprefixer 链路完整贯通，且由 browserslist 控制前缀生成。
Autoprefixer 不在 Sass 中运行，它只处理编译后的 CSS。所谓“在 Sass 中自动加前缀”是根本不存在的路径——Sass 编译器（如 dart-sass）完全不识别浏览器兼容性，也不读取 browserslist，更不会生成 -webkit- 或 -ms- 这类前缀。
你真正需要的不是“Sass 怎么加前缀”，而是“怎么让 Sass 输出的 CSS 被 Autoprefixer 处理”。
为什么 @mixin flex 或 @include transform 是过时且危险的做法
这类混合宏看似省事，实际埋了三类坑：
- 它们按固定规则硬编码前缀，比如给
display加-webkit-display，但该语法根本无效，直接导致 CSS 解析失败 - 无法适配属性组合场景：比如
gap在flex容器中需前缀，但在grid中不需要；place-items在 Safari 14.1 下压根不支持，加前缀也没用 - 和真实
Autoprefixer流程冲突：如果构建里已启用插件，再手写 mixin，结果就是重复输出或覆盖失效
Webpack 项目里 Sass + Autoprefixer 正常工作的关键链路
必须确保 CSS 字符串流经 Autoprefixer，而不是靠 Sass 自己“猜”该加什么。
-
sass-loader→css-loader→postcss-loader这个顺序不能颠倒；postcss-loader必须在css-loader之后，否则它收不到编译后的 CSS -
css-loader的importLoaders至少设为1，否则@import 'xxx.scss'引入的样式不会进 PostCSS 流程 - 检查
postcss.config.js是否真被加载：在里面写require('nonexistent')，启动构建——如果不报错，说明配置文件根本没读到
Vite 或 Vue CLI 项目中容易漏掉的配置点
这些工具默认集成了 Autoprefixer，但默认行为常被意外覆盖。
- Vite：只要项目根目录有
postcss.config.js且含autoprefixer插件，<style lang="scss">就会走 PostCSS；但如果你在vite.config.js里写了css.postcss对象，就会完全替换默认配置，插件就丢了 - Vue CLI：普通
<style>默认走vue-style-loader → css-loader → postcss-loader链路；但如果你用了<style lang="postcss">，反而会跳过默认流程，得自己配全链路 - 生产构建常出问题：某些 CLI 内置了
OptimizeCSSAssetsPlugin，它自带一套旧版Autoprefixer，和你配的冲突，结果开发环境有前缀、打包后没了
验证前缀是否真生效的最简方法
别信编辑器插件或本地预览，要验构建产物。
立即学习“前端免费学习笔记（深入）”；
- 执行
npx browserslist，确认当前匹配的浏览器列表符合预期（比如包含iOS >= 13） - 执行
npx autoprefixer --info，看目标浏览器下flex、transform等属性是否被标记为“需要前缀” - 打开打包后的
.css文件，搜索-webkit-flex或-ms-flexbox，确认它们真实存在且位置正确 - 在目标设备（如 iOS Safari 12.4）上打开 DevTools，检查 computed 样式里
display: flex是否生效；不生效就说明前缀没加，或加错了
importLoaders 值设错，或 postcss.config.js 放错位置，就能让整个前缀机制静默失效。 
