CSS modules not works with PostCSS (Webpack 2)

[azat-io]

It's strange and looks like a bug 🐛

I'm using Webpack v.2.1.0-beta.25

If I add CSS modules to css-loader after postcss-loader the same class names which imports from different .jsx files will have the same hash.

use: [
    'style-loader',
    {
        loader: 'css-loader',
        options: {
            importLoaders: 1,
            modules: true,
            localIdentName: '[local]--[hash:base64:5]',
        },
    },
    'postcss-loader',
],

If I remove postcss-loader and settings for PostCSS all will works good.

This is not plugin problem.

Look here please: https://github.com/azat-io/webpack2-css-modules-demo

At this repo you can see three different components which contains .title class name. If you try to build app you can see that all of this classes will have the same hash.

After then just comment postcss-loader and settings for new webpack.LoaderOptionsPlugin and all will works good.

Previous issue

[ai]

@azat-io Could you try PostCSS common config?

[azat-io]

@ai Yes. All works good if I put list of plugins to .postcssrc file 😃

[ai]

Seems like we have a mystery issue in webpack 2.

I have no idea how to fix it and just will force a common config.

[azat-io]

Okay 😞

[ai]

If you worry about too many config files, just put PostCSS plugins in package.json.

Or help me with debugging 😆

[ai]

Also you could try postcss-modules'

[ghost]

this work for me. hope it is helpful

[pirelenito]

This worked for me webpack-contrib/css-loader#413 (comment)