autoprefixer不支持scss源码，仅作用于sass编译后的标准css；必须通过postcss在sass-loader之后处理，依赖browserslist配置动态添加前缀，顺序错误或配置缺失将导致前缀失效。
SCSS本身不支持Autoprefixer，必须走PostCSS处理链
Autoprefixer不是预处理器插件，它不解析.scss源码，只处理已编译成标准CSS字符串后的输出。你写display: flex在SCSS里，Sass编译器（如sass或dart-sass）会原样输出这行，但不会加-webkit-box；真正加前缀的环节必须发生在Sass → CSS之后、CSS → 最终产物之前。
- 错误做法：在
.scss文件里手动写-webkit-flex，再指望Autoprefixer“修正”它——它不会降级转标准，也不会升级补前缀 - 正确顺序：SCSS →
sass-loader→ CSS →postcss-loader（含autoprefixer）→ 打包结果 - 常见翻车点：把
postcss-loader放在sass-loader之前，导致它收到的是SCSS语法而非CSS，直接报错或静默跳过
Webpack中确保postcss-loader在sass-loader之后
loader执行顺序从右到左，必须让PostCSS在Sass编译完成后再介入：
use: [ 'style-loader', 'css-loader', 'postcss-loader', // ← 这里必须在 sass-loader 之后 'sass-loader' // ← Sass编译出纯CSS，交给postcss-loader处理 ]
- 如果用
MiniCssExtractPlugin.loader，顺序仍是：MiniCssExtractPlugin.loader→css-loader→postcss-loader→sass-loader -
postcss.config.js里只需启用autoprefixer，不要传browsers参数（已被废弃），改用package.json里的browserslist字段 - 验证是否生效：在SCSS中写
backdrop-filter: blur(4px)，构建后检查输出CSS里是否有-webkit-backdrop-filter——没有，说明链路断了或browserslist没覆盖Safari
为什么backdrop-filter没加-webkit-前缀
这不是Autoprefixer失效，而是你没按规范写。截至Safari 17.4，backdrop-filter仍**仅支持带-webkit-前缀的写法**，标准语法无效。Autoprefixer只做「标准 → 前缀」的向下兼容，不做「标准 → 前缀」的强制兜底。
- 必须自己写：
-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); - Autoprefixer才会保留前缀版，并在支持标准版的浏览器里补上无前缀版本
- 类似属性还有
dialog、scroll-behavior: smooth（部分安卓WebView）、aspect-ratio（旧版Safari）——查caniuse.com的“Notes”栏，看是否标了“Only with prefix”
Vite或Create React App里怎么配
它们默认集成Autoprefixer，但容易忽略两个关键点：
- Vite：默认跳过
node_modules/下的CSS，所以@import 'bootstrap/scss/bootstrap'这种写法不会触发Autoprefixer；改用@import 'bootstrap/dist/css/bootstrap.css'，或把Bootstrap CSS复制进src/再引入 - Create React App：完全隐藏配置，只认
package.json里的browserslist，哪怕你写了.browserslistrc也无效 - 所有环境都依赖
browserslist——比如写"browserslist": ["> 1%", "last 2 versions", "not dead"]，Autoprefixer才知该为哪些浏览器加前缀；空配置或写错格式（如用browsers字段）会导致零输出
browserslist声明的兼容目标。写错语法、漏配browserslist、或者把处理时机放错位置，都会让前缀消失得无声无息。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
