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?

Every css module incapsulates in itself all the media queries the component should respond to. And I would like to use css-mqpacker to combine them together. In fact everything works in my current config, but css-mqpacker works within one particular .css file. And what I want is to apply postcss stuff to the whole bundle — Grundiss
– Grundiss, Commented May 23, 2018 at 13:30

Grundiss · Accepted Answer · 2018-07-09 08:24:05Z

4

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

answered Jul 9, 2018 at 8:24

Grundiss

1539 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mikep Over a year ago

Thank you very much! This is probably sole hint all over the internet. Im now using your solution because of sharing postcss-css-variables between files. I have just one problem... when using postcss-loader I can correctly get warnings like variable --xyz is undefined and used without a fallback but when switching from postcss-loader to your solution via plugin warnings are completely swallowed so I can not detect possible issues. Can you help me please with this?

mikep Over a year ago

Next problem is not working source map and also building time during watch is slow because it is processing all files again and again not just one modified. So I think I should avoid going this way.

Bierson · Accepted Answer · 2018-07-06 16:41:22Z

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)

felixmosh · Accepted Answer · 2018-07-07 08:09:31Z

0

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

answered Jul 7, 2018 at 8:09

felixmosh

35.8k10 gold badges81 silver badges99 bronze badges

Collectives™ on Stack Overflow

Using postcss-loader after css-loader

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related