Using postcss-loader after css-loader

Question

I am using CSS modules with webpack css-loader, then I bundle them with mini-css-extract-plugin. Here is how my config looks like:

{
    test: /\.css$/,
    use: [
      MiniCssExtractPlugin.loader,
      {
        loader: "css-loader",
        options: {
          modules: true,
          localIdentName: "[name]-[local]_[hash:base64:5]",
          imports: true,
          importLoaders: 1
        }
      },
      "postcss-loader"
    ]
  }

For some reason (see comments section) I would really like to apply postcss-loader not to every individual .css file, but to the whole bundle. How can I achieve that?

Answer 1

Thank you all for trying to resolve my problem. After all I've found the solution. I do not use postcss-loader any more, but instead I use OptimizeCssAssetsPlugin like this:

new OptimizeCssAssetsPlugin({
  cssProcessor: postcss([CSSMQPacker]),
}),