autoprefixer不处理scss文件，仅作用于编译后的标准css；必须确保构建流程为sass→css→postcss→autoprefixer，且browserslist配置明确、postcss.config.js正确加载。
SCSS 文件本身不会被 Autoprefixer 处理
Autoprefixer 只处理标准 CSS 语法，不解析 .scss 或 .sass 文件。你在 SCSS 里写 display: flex，如果没经过编译成 CSS，PostCSS 根本看不到这行代码——它连 SCSS 的变量、嵌套、@mixin 都不认识。
常见错误现象：右键 SCSS 文件执行 Autoprefixer、或在 WebStorm/VSCode 中对 .scss 启用插件，结果无输出、报错或静默失败。
- 必须先将 SCSS 编译为纯 CSS（例如生成
style.css），再让 PostCSS + Autoprefixer 处理该 CSS 文件 - Vite/Webpack 默认不把
.scss直接送进 PostCSS 流程；它们走的是sass-loader→css-loader→postcss-loader链路，中间缺一环就断掉 - 若用
dart-sassCLI 手动编译（如sass src/index.scss dist/index.css），那编译后的dist/index.css必须单独再喂给postcss-cli，否则前缀不会加
Webpack 中确保 SCSS 编译后进入 PostCSS 流程
关键不是“有没有 autoprefixer”，而是 postcss-loader 是否真在 css-loader 之后、且 css-loader 的 importLoaders ≥ 1。
-
css-loader的importLoaders: 1表示：遇到@import，把被引入的 CSS 文件往上交给 1 个 loader（即postcss-loader）；设为 0 就自己消化掉，Autoprefixer 完全收不到 - loader 顺序必须是：
style-loader←css-loader←postcss-loader←sass-loader（或less-loader） - 如果用了
MiniCssExtractPlugin.loader，也要确保它和css-loader之间插了postcss-loader
Vite 中 SCSS + Autoprefixer 的正确链路
Vite 5+ 默认集成 PostCSS，但只对 .css、.pcss、.postcss 后缀自动启用；.scss 文件默认只走 sass 编译，不触发 PostCSS —— 除非你显式配置。
- 不要在
vite.config.ts里用css.postcss.options.plugins覆盖默认配置，这会丢掉内置的 Autoprefixer；如需自定义，改用项目根目录的postcss.config.js - 确保
postcss.config.js存在且导出插件，例如：module.exports = { plugins: [require('autoprefixer')] } - SCSS 文件中写的
@import './base.scss'没问题，但被引入的base.scss必须也在src/下（不能在public/），否则 Vite 直接跳过构建流程 - 如果你用
scss语法写@import './reset.css'，这个reset.css必须后缀是.css且不在public/，否则也不会进 PostCSS
browserslist 配置太新会导致“零前缀”假象
写了 gap: 1rem 却没看到 -webkit-gap？不是流程坏了，而是 npx browserslist 显示当前配置只匹配 Safari ≥ 14.1、Chrome ≥ 90 等现代版本——这些浏览器原生支持 gap，Autoprefixer 判定无需补。
- 运行
npx browserslist确认实际生效的浏览器范围；再跑npx autoprefixer --info看哪些属性被标记为“需要前缀” - 别用
"last 2 versions"这类模糊配置：它可能把 Chrome 125 当作“last”，却漏掉 Android WebView 67（仍需-webkit-） - 线上项目推荐显式声明，例如：
"iOS >= 13", "Safari >= 14.1", "Chrome >= 87", "Android >= 67" - 配置必须放在
package.json的browserslist字段，或项目根目录的.browserslistrc；postcss.config.js里的overrideBrowserslist已废弃，Vite/Webpack 通常不读
el.style.display = 'flex'，或通过 document.createElement('style') 插入的字符串样式，无论怎么配，都不会加前缀——它只工作于构建阶段的源文件字节流。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
