CODEWITHSUNDEEP
webpackcss-loadercss-modulespostcss-loader
Grundiss
Grundiss

Reputation: 153

Using postcss-loader after css-loader

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?

Upvotes: 7

Views: 2167

Answers (3)

Grundiss
Grundiss

Reputation: 153

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]),
}),

Upvotes: 4

felixmosh
felixmosh

Reputation: 35503

You can write a webpack plugin to run on the css bundle and apply you postCss plugin on it.

You can check as a reference some plugin that i've wrote: https://github.com/wix-incubator/extract-tpa-style-webpack-plugin/blob/master/src/index.js#L71

Upvotes: 0

Bierson
Bierson

Reputation: 78

Are you referencing your other CSS with @import?

I have been trying to do the same thing for merging duplicate CSS selectors. I've had moderate success using postcss-import. It will combine all of your imports so you can process it with postcss before css-loader bundles it all up.

{
    test: /\.css$/,
    use: [
        MiniCssExtractPlugin.loader,
        {
            loader: 'css-loader',
            options: {
                modules: true,
                localIdentName: '[name]-[local]_[hash:base64:5]'
            }
        },
        {
            loader: 'postcss-loader',
            options: {
                plugins: [
                    require('postcss-import'),
                    require('css-mqpacker')
                ]
            }
        }
    ]
}

Unfortunately, this can lead to asset pathing issues as postcss knows nothing about webpack's path resolving.

You can work around that with aliases. 


require('postcss-import')({
    resolve: id => id.replace(/^~?(@example-alias)/, path.resolve(__dirname, './src'))
}),
Hopefully this helps. I too would like a simpler solution with css-loader. Ideally: import & combine (css-loader) > postcss > bundle (css-loader)

Upvotes: 0

Related Questions