autoprefixer不生效主因是postcss未运行或browserslist配置错误；需验证postcss.config.js是否被读取、确保插件正确声明、browserslist精准匹配真实用户机型，并避免cssnano等工具误删前缀。
PostCSS 没有自动补全 CSS 前缀，绝大多数情况不是插件没装，而是 autoprefixer 根本没运行，或者运行了但配置没对上真实浏览器环境。
postcss.config.js 是否被真正读取
构建工具不加载配置文件，autoprefixer 就等于不存在。Vite 5+ 默认启用 PostCSS，但如果你在 vite.config.js 里写了 css.postcss 字段，它会直接屏蔽默认行为；Webpack 则完全依赖你手动配 postcss-loader，漏掉或顺序错就断链。
- 在
postcss.config.js里加一行require('xxx-missing-plugin')，启动构建——不报错说明该文件根本没被读取 - Vite 要求
postcss.config.js必须在项目根目录；Webpack 中postcss-loader必须放在css-loader之后，且css-loader的importLoaders≥ 1，否则@import进来的 CSS 不进 PostCSS 流程 - Vue 单文件组件中，
<style></style>默认不走 PostCSS，必须写成<style lang="postcss"></style>或确认 loader 链路完整
browserslist 配置是否覆盖真实用户机型
autoprefixer 完全按 browserslist 输出前缀，不是靠经验判断。“last 2 versions” 可能把 Safari 18 拉进来，但你的真实用户卡在 iOS 16.4，结果该加的 -webkit-backdrop-filter 没加，不该加的 -ms- 却塞了一堆。
- 优先把
browserslist写在package.json里，避免.browserslistrc和 CI 环境不一致 - 国内项目慎用
> 1%：iOS 15.0 全球占比仍超 1%，但它在部分 iPhone SE 上对aspect-ratio支持不稳定，应显式写"iOS >= 16.4" - 运行
npx browserslist查看当前配置实际匹配哪些浏览器版本；再跑npx autoprefixer --info看gap、backdrop-filter等属性是否被标记为“需要前缀”
autoprefixer 是否被正确声明为 PostCSS 插件
即使装了包、写了 browserslist，如果 postcss.config.js 没把它放进 plugins 数组，它就完全不运行。常见错误包括插件写成字符串 "autoprefixer"（Webpack 5+ 不支持），或放在数组末尾但漏掉括号。
- 正确写法（ESM / CommonJS 均可）：
module.exports = { plugins: [require('autoprefixer')] }; - 不要用
overrideBrowserslist参数硬编码目标——它容易和package.json中的browserslist冲突，优先统一维护一处 - Laravel Mix 6+ 默认不再自动注入
autoprefixer，必须手动安装postcss和autoprefixer并创建postcss.config.js
哪些 CSS 属性 autoprefixer 根本不会处理
它只补前缀，不转译语法、不模拟缺失特性、不改语义。写了 aspect-ratio: 1/1 没任何前缀？正常，caniuse 显示该属性无主流前缀需求；vh 在 iOS Safari 地址栏收放时被压缩？autoprefixer 不动单位，得用 JS 动态注入 --vh；position: sticky 在 iOS 15.4 之前嵌套失效？它识别不了这种运行时限制。
-
gap、place-items、backdrop-filter等现代属性，是否加前缀取决于browserslist和 caniuse 数据库的实时匹配结果，不是“写了就加” - Tailwind、Emotion、Styled Components 等工具若在运行时生成样式（如 JS 拼接字符串或 css 函数），PostCSS 不会处理——这些场景需依赖各自内置的前缀逻辑，或改用 CSS Custom Properties
- cssnano 在生产构建中可能误删前缀：它默认启用自带的
autoprefixer，目标浏览器配置可能和你的不一致，应显式禁用：cssnano({ autoprefixer: false })
最容易被忽略的一点是：你以为 CSS 文件进了构建流程，其实它只是被 raw 引入（比如 @import 了 .css 文件但没走 PostCSS）、放在 public/ 目录下、或用了未安装预处理器的 .scss 路径——这些情况下，autoprefixer 压根碰不到那行代码。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
