PostCSS 在 Webpack 中不生效怎么办？

端木恩宇提问于 2026-03-12 10:54:20 阅读 46

工具

我按照文档配置了 PostCSS 和 Webpack，但写好的 autoprefixer 根本没起作用，CSS 里还是没有加厂商前缀。

我的 webpack.config.js 里是这么配的：

module.exports = {
  module: {
    rules: [
      {
        test: /.css$/,
        use: ['style-loader', 'css-loader', 'postcss-loader']
      }
    ]
  }
};

也建了 postcss.config.js 文件：

module.exports = {
  plugins: [require('autoprefixer')]
};

但编译出来的 CSS 还是原样，比如 display: flex 完全没加前缀。是不是 loader 顺序错了？还是插件没装对？

我来解答赞 5 收藏

反馈

2 条解答

UE丶一茹 Lv1

看起来你的配置基本没问题，但有几个地方要检查一下。首先确认 postcss-loader 的版本是否和文档匹配，不同版本的用法可能有差异。

另外建议在 postcss.config.js 里加上浏览器兼容列表，比如这样写：

module.exports = {

  plugins: [

    require('autoprefixer')({

      overrideBrowserslist: ['>1%', 'last 2 versions']

    })

  ]

};

别忘了安装 browserslist 这个包，它是用来解析这些规则的。注意安全，不要直接在生产环境测试，先在本地验证。

还有就是 loader 顺序确实要注意，你现在的顺序是对的，但要确保 css-loader 和 postcss-loader 都是最新稳定版。我之前遇到过旧版本 css-loader 导致的问题。

最后检查下 node_modules 里 autoprefixer 是否真的安装成功了。有时候依赖冲突会导致插件没生效。运行下 npm ls autoprefixer 确认一下。

如果还不行，试试把 style-loader 拿掉，单独看下 css-loader 输出的 CSS，排查问题来源。反正本地开发环境多试几次总能找出原因的，别着急。

2026-03-30 10:09

令狐婉琳 Lv1

问题在于 autoprefixer 不知道要适配哪些浏览器，得告诉它。

在 postcss.config.js 里直接加上 browsers 配置：

module.exports = {

  plugins: [

    require('autoprefixer')({ overrideBrowserslist: ['last 2 versions'] })

  ]

};

或者在 package.json 里加 browserslist 也行。配完重新编译就应该有前缀了。

2026-03-12 11:04