autoprefixer 不生效的根本原因是 postcss 未正确加载插件、browserslist 配置不当或下游工具（如 cssnano）误删前缀；需确保 postcss.config.js 正确导出插件、browserslist 明确兼容目标、禁用 cssnano 内置 autoprefixer 并清理构建缓存。
PostCSS 配置后 Autoprefixer 完全不生效？
常见现象是写了 display: flex，但编译后 CSS 里没出现 -webkit-box 或 -ms-flexbox。根本原因通常是 PostCSS 没真正调用到 Autoprefixer 插件，或者插件被其他工具（如 webpack 的 css-loader 自带的 PostCSS）重复/覆盖加载。
- 确认
postcss.config.js存在且导出正确插件数组，例如：module.exports = { plugins: [require('autoprefixer')] }; - 检查构建工具是否自带 PostCSS：webpack 5+ 的
css-loader默认启用 PostCSS，若同时又用postcss-loader，容易导致配置被忽略或执行两次 - Autoprefixer 默认只处理已知目标浏览器支持的属性，如果
browserslist配置为空或太新（如只写last 1 chrome version），旧前缀就不会加——务必在package.json中明确写"browserslist": ["> 1%", "not dead", "IE 11"]
Autoprefixer 补全的前缀和目标浏览器怎么对得上？
不是“所有浏览器都加所有前缀”，Autoprefixer 严格按 browserslist 查询 Can I Use 数据库，再决定加哪些前缀、加到哪一级。比如 gap 在 Flex 布局中，Chrome 84+ 不需要前缀，但 IE 11 根本不支持，所以即使你写了 IE 11，它也不会补前缀——而是直接不输出该声明（除非开启 flexbox: 'no-2009' 强制降级）。
-
flexbox: 'no-2009'会让display: flex输出display: -ms-flexbox而非display: -webkit-box，适合需要兼容老版 Edge 或 IE 10/11 的场景 - 使用
grid: true可开启 Grid 前缀（仅对 IE 10/11 有效），但注意：Autoprefixer 不转换现代 Grid 语法，只补-ms-grid-column这类旧属性 - 通过
npx autoprefixer --info可实时查看当前browserslist下哪些属性会被处理、哪些不会
Webpack 中 PostCSS + Autoprefixer 和 cssnano 冲突导致前缀丢失？
典型表现：开发环境正常，生产构建后前缀没了。大概率是 cssnano 在压缩时把 Autoprefixer 加的前缀当“冗余代码”删掉了——因为默认配置里 cssnano 启用了 autoprefixer 功能，但它用的是自己的内置版本，且目标浏览器配置可能和你的不一致。
- 禁用
cssnano内置的 Autoprefixer：{ plugins: [cssnano({ autoprefixer: false })] } - 确保
postcss-loader在css-loader之后、mini-css-extract-plugin之前执行，顺序错会导致插件未运行 - 如果用
optimize-css-assets-webpack-plugin，它内部也依赖cssnano，同样要传{ autoprefixer: false }
Vue CLI 或 Create React App 里想自定义 Autoprefixer 行为
这类脚手架默认封装了 PostCSS 配置，直接放 postcss.config.js 可能被忽略。必须走官方约定路径。
立即学习“前端免费学习笔记（深入）”；
- Vue CLI：在
vue.config.js的css.loaderOptions.postcss里传配置对象，plugins数组要显式包含require('autoprefixer') - Create React App v5+：不支持直接覆盖 PostCSS 配置，需用
craco或react-app-rewired，在重写配置里修改postcssOptions.plugins - 两者都依赖
browserslist，改完记得清缓存（yarn build前删掉.cache目录，否则旧结果可能被复用）
Autoprefixer 看似开箱即用，但实际生效高度依赖三者对齐：PostCSS 加载链路、browserslist 实际解析结果、以及下游压缩工具是否误删。最容易被忽略的是构建缓存和多层 PostCSS 实例共存——查不到前缀时，先跑 npx autoprefixer --info 和 npx browserslist 看真实目标，比翻配置文件更快。
