PostCSS在Webpack里不生效是怎么回事？

端木恩豪提问于 2026-03-26 23:24:21 阅读 6

工具

我按照文档装了postcss-loader和autoprefixer，也在webpack配置里加了loader，但写好的CSS完全没有被处理，比如display: flex连个-webkit前缀都没有。

我的webpack配置是这样的：

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

postcss.config.js也放在项目根目录了：

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

到底哪里漏了？为啥PostCSS就是不工作？

动画效果

我来解答赞 2 收藏

反馈

1 条解答

公孙文仙 Lv1

我看了一下你的配置，问题可能出在postcss-loader的顺序和版本上。先说解决方案，复制下面这个配置试试：

module.exports = {

  module: {

    rules: [

      {

        test: /.css$/,

        use: [

          'style-loader',

          'css-loader',

          {

            loader: 'postcss-loader',

            options: {

              postcssOptions: {

                plugins: [

                  require('autoprefixer')

                ]

              }

            }

          }

        ]

      }

    ]

  }

}

几点注意：
1. 把postcss-loader放到对象里，加上options配置
2. 确保postcss-loader版本是最新稳定版，老版本可能有问题
3. 检查下node_modules里的autoprefixer版本，建议用最新版

还有个容易忽略的点：记得删掉node_modules然后重新npm install或者yarn安装依赖。

有时候就是这么奇怪，明明配置看起来没错，就是不生效。这种时候换个写法或者更新版本往往能解决问题。我之前也被这问题搞过，折腾半天才发现是loader配置不够完整。希望这次能帮你搞定。

2026-03-27 00:11