autoprefixer 仅按固定顺序读取 browserslist 配置：代码传参 > package.json 的 browserslist 字段 > .browserslistrc > browserslist 环境变量；postcss 中需显式引入 autoprefixer 插件，且须用 npx browserslist 验证实际生效的浏览器范围并清理缓存。
Autoprefixer 读取 Browserslist 的实际路径
Autoprefixer 不会自动扫描项目根目录下所有可能的配置文件；它按固定顺序查找，且只认特定位置的字段。你写在 autoprefixer.yml 里的 browsers 配置，在绝大多数现代构建流程中根本不会生效——除非你手动实例化 Autoprefixer::Rails::Processor 并显式传参。
真正起效的优先级是：
- 代码里直接调用
autoprefixer({ browsers: [...] })时传入的参数（最高优先级） -
package.json中的browserslist字段（最常用、最稳定） -
.browserslistrc文件（纯文本，无 JSON 语法风险） -
BROWSERSLIST环境变量（适合 CI/CD 临时覆盖，如BROWSERSLIST="ie 11" npm run build）
如果你同时写了 package.json 和 .browserslistrc，前者会覆盖后者；但若只用 .browserslistrc，Rails 项目里它会被 autoprefixer-rails 自动加载，而 PostCSS 生态默认只看 package.json。
为什么 CSS 没加前缀？常见配置陷阱
最常被忽略的是规则组合的语义歧义。比如写 "last 2 versions"，它指每个浏览器的最新两个正式发布版（不含 beta），但不会排除 IE 11——因为 last 2 versions 本身不判断“是否已死”。必须搭配 "not dead" 才能过滤掉 IE 11（Can I Use 已将其标记为 dead）。
另一个坑是地域统计误用：> 1% 是全球占比，中国区用户为主的项目得写 > 1% in CN，否则可能漏掉 QQ 浏览器或 UC 内核的高占比版本。
还有拼写错误导致整个配置静默失效：比如写 edge 12（实际应为 edge 12.1 或 edge >= 12）。加 ignoreUnknownVersions: true 可避免这类错误让构建中断，但更推荐用 npx browserslist 命令验证输出。
PostCSS 配置中 Autoprefixer 必须显式启用
即使 package.json 里写了 browserslist，PostCSS 也不会自动调用 Autoprefixer——它只是个插件容器。你必须在 postcss.config.js 中明确引入：
module.exports = {
plugins: [
require('autoprefixer') // 这一行不能少
]
}
如果用了 postcss-preset-env，它内部已包含 Autoprefixer，但仍依赖你项目中的 browserslist 配置；此时无需重复写 require('autoprefixer')，但得确认 postcss-preset-env 版本 ≥ 7.0（旧版可能忽略 not dead 规则）。
Webpack 5 用户注意：postcss-loader 默认走 process.env.NODE_ENV === 'production' 路径，开发环境若想用 dev 配置，得在 webpack.config.js 里手动设 process.env.NODE_ENV = 'development'，或改用 postcss.config.js 的函数式导出动态判断。
验证生成的 CSS 是否真兼容目标浏览器
别只信配置文件写了什么，要看最终输出。运行 npx browserslist 直接打印当前匹配的浏览器列表，例如输出 and_chr 124, and_ff 123, chrome 126, edge 126, firefox 127, safari 17.5，就说明 IE、旧 Android Browser 已被排除。
再检查打包后的 CSS：找一个典型属性如 display: grid，它不该有任何前缀（现代浏览器原生支持）；而 transform: rotate(45deg) 在 Safari 13.1 以下仍需 -webkit-transform，如果没出现，说明 browserslist 配置把 Safari 低版本排除了，或者 Autoprefixer 版本太老不识别新规则。
最容易被忽略的是构建工具链的缓存：改完 browserslist 后，Webpack 或 Vite 可能复用旧的 CSS 缓存，务必清掉 node_modules/.cache 或加 --force 参数重跑构建。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
