Webpack 2 CSS Modules support - postcss

Question

Right now I'm moving my current project from Webpack 1 to Webpack 2 and I encounter some problems with css modules which previously worked fine. In particular, I use css-loader and react-css-modules. My current development configuration is the following:
test: /module\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 1,
localIdentName: '[name]__[local]___[hash:base64:5]'
}
},
'postcss-loader'
]
It works fine. For production I use ExtractTextPlugin (version 2.0.0-beta.4) and my Webpack config for that case goes like this:
test: /module\.css$/,
loader: ExtractTextPlugin.extract({
fallbackLoader: 'style-loader',
loader: [
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 1,
localIdentName: '[hash:base64:5]'
}
},
'postcss-loader'
]
}),
In this case build fails with the following error:
Module build failed: Error: composition is only allowed
when selector is single :local class name
So it seems like it doesn't prepend local prefixes. It is also mentioned in the css-loader documentation:
Note: For prerendering with extract-text-webpack-plugin you should
use css-loader/locals instead of style-loader!css-loader in the
prerendering bundle. It doesn't embed CSS but only exports the
identifier mappings.
So I tried loader: 'css-loader/locals' as well as adding it to options, but, unfortunately, nothing works.
I also tried to fix this problem with postcss postcss-modules plugin. It fixes the build, but when I try to start my application it looks like it doesn't have appropriate imports of css name mappings.

Answer 1

In case, that somebody will face the same problem in the future. For this version of ExtractTextPlugin (2.0.0-beta.4) you should set loader parameters in Webpack-1 way. Concretely:
loader: ExtractTextPlugin.extract({
fallbackLoader: 'style-loader',
loader: [
'css-loader?modules&importLoaders=1&localIdentName=[hash:base64:5]',
'postcss-loader'
]
}),
Works fine for me