PostCSS没生效需逐项排查：未安装postcss-loader、loader顺序错误（须在css-loader后style-loader前）、importLoaders未设为1、postcssOptions未包裹plugins、browserslist配置不当或未生效、Vue中普通<style>块默认不走PostCSS。
PostCSS没生效？先确认它是否真被加载了
Webpack 5 不会自动读取 postcss.config.js，哪怕你把它放在根目录，也得靠 postcss-loader 显式触发。常见错误是只装了 autoprefixer 却没装 postcss-loader，或者 loader 没插进处理链里。
验证方式很简单：在 postcss.config.js 第一行加 require('xxx')（一个不存在的包），如果启动不报错 → 文件压根没被读到。
-
postcss-loader必须出现在css-loader之后、style-loader之前，顺序错了就等于没走 PostCSS - 如果用了
MiniCssExtractPlugin.loader，也要按同样顺序：MiniCssExtractPlugin.loader→css-loader→postcss-loader -
css-loader的importLoaders至少设为1，否则@import进来的 CSS 不会经过 PostCSS
loader 配置写法：用 postcssOptions 而不是 plugins 字段
Webpack 5 官方文档已明确废弃 options.plugins 写法，必须用 postcssOptions 包一层，否则 autoprefixer 不会执行。
错误写法：{ loader: 'postcss-loader', options: { plugins: [require('autoprefixer')] } }
正确写法：
立即学习“前端免费学习笔记（深入）”；
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [require('autoprefixer')]
}
}
}
- 如果你用的是
postcss-preset-env，它已内置autoprefixer，无需重复引入 - 插件传参要写对字段名：比如指定浏览器目标，得用
overrideBrowserslist（不是browsers），否则会被忽略
browserslist 配置决定前缀加不加、加多少
autoprefixer 完全依赖 browserslist 配置，不是“越宽泛越好”。写 "last 2 versions" 可能给早已原生支持 gap 的 Safari 17 加 -webkit-gap；写 "IE 11" 会生成大量 -ms- 前缀，但你的项目根本跑不起来。
- 推荐直接在
package.json里写"browserslist"字段，比单独建配置文件更可靠 - 实际值建议具体化，例如：
["Chrome >= 90", "Firefox >= 89", "Safari >= 15.4"] - 运行
npx browserslist可实时查看当前配置匹配到哪些浏览器版本
Vue 项目里特别注意：普通 <style> 块默认不走 PostCSS
Vue CLI 或 vue-loader 默认只对 <style lang="postcss"> 启用 PostCSS；普通 <style> 块能否生效，取决于 vue-loader 是否把 postcss-loader 注入到其内部 loader 链中。
- Vue 3 + Vite 用户：Vite 5+ 默认启用 PostCSS，但如果你在
vite.config.js中写了css.postcss，会覆盖默认行为，反而导致失效 - Webpack + vue-loader 用户：必须在
vue-loader的options.postcss里显式传入插件，或确保外部postcss-loader已正确接入css规则 - 最稳妥的方式：统一用
<style lang="postcss">，避免猜测链路是否完整
最容易被忽略的是：PostCSS 不是“安装即生效”的工具，它是一条需要手动打通的流水线。任何一环断开——loader 顺序错、importLoaders 漏设、browserslist 写错、甚至只是文件路径放错位置——都会让前缀消失得无声无息。
