autoprefixer 不会自动生效，必须确保其真实介入 css 构建流程；常见问题包括 postcss.config.js 未被加载、browserslist 配置错误或 css 未经过 postcss 处理。
Autoprefixer 不会自动生效，必须确保它真实介入了 CSS 构建流程——绝大多数“没加前缀”的问题，根源是 postcss.config.js 没被读取、browserslist 配置错、或 CSS 文件根本没走 PostCSS。
postcss.config.js 是否被构建工具真正加载？
配置文件存在 ≠ 实际运行。Vite 5+ 默认启用 PostCSS，但如果你在 vite.config.ts 中写了 css.postcss 字段，反而会覆盖默认行为；Webpack 则完全不识别该文件，必须手动配 postcss-loader。
- 快速验证：在
postcss.config.js里加一行require('xxx-missing-plugin')，启动 dev server —— 不报错说明该文件压根没被加载 - Vite 要求
postcss.config.js必须放在项目根目录；若用css.postcss.options.plugins自定义，需显式写入require('autoprefixer') - Webpack 中
postcss-loader必须排在css-loader之后、style-loader之前，且css-loader的importLoaders≥ 1，否则@import的 CSS 不进 PostCSS 流程 - Vue 单文件组件中，
<style></style>默认不走 PostCSS；要生效，要么写成<style lang="postcss"></style>，要么确认vue-style-loader → css-loader → postcss-loader链路完整
browserslist 配置是否匹配真实目标环境？
Autoprefixer 完全按 browserslist 输出前缀，不是靠经验或猜测。“last 2 versions” 会拉入 Safari 18，但它对 backdrop-filter 的 -webkit- 支持不稳定；“> 1%” 可能引入 iOS 15.0（全球占比仍超 1%），但它对 aspect-ratio 支持不一致。
- 优先把
browserslist写在package.json里，避免多处维护；不要用autoprefixer({ overrideBrowserslist: [...] })（已不推荐） - 国内/线上项目推荐显式声明，例如：
"iOS >= 16.4"、"Chrome >= 90"、"Safari >= 14.1"，比模糊语法更可控 - 运行
npx browserslist查看当前配置实际匹配哪些浏览器版本；再跑npx autoprefixer --info看哪些属性会被处理——别只凭记忆写 CSS - 写了
display: flex却没出-webkit-flex？大概率是配置太新，比如只写了"last 2 versions"，而 Chrome/Safari 最新版已原生支持
Autoprefixer 的能力边界在哪？
它只补前缀，不转译语法、不模拟缺失特性、不处理运行时样式。所有你以为“该加却没加”的地方，往往是因为它根本不能加，或者不该加。
- 动态插入的 CSS（如
document.createElement('style')或el.innerHTML = '...'）构建时不可见，autoprefixer 完全无法处理 -
gap: 1rem、place-items: center、aspect-ratio: 1/1目前无主流前缀需求，caniuse 显示它们在目标浏览器中已原生支持 -
vh在 iOS Safari 地址栏展开/收起时被压缩、backdrop-filter在 iOS 15.4+ 才稳定支持-webkit-backdrop-filter—— 这些需 JS 注入变量或@supports手动处理，autoprefixer 无能为力 - Tailwind 已内置 autoprefixer 逻辑，额外配一遍可能冲突；Emotion/Styled Components 等 CSS-in-JS 库若用
css函数，需确认其是否接入 PostCSS 流程
最容易被忽略的是：Vite 项目默认已内置 autoprefixer，无需手动配，除非你禁用了它；而 Webpack 项目哪怕装了包、写了 browserslist，只要 postcss-loader 没正确插入 loader 链，就等于什么都没做。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
