CSS Web Pack 2 Support

Question

Now I am moving my current project from Webpack 1to Webpack 2, and I am facing some problems with css modules that previously worked fine. In particular, I use css-loaderand react-css-modules. My current development configuration is as follows:

test: /module\.css$/,
use: [
        'style-loader',
        {
           loader: 'css-loader',
           options: {
              modules: true,
              importLoaders: 1,
              localIdentName: '[name]__[local]___[hash:base64:5]'
           }
        },
        'postcss-loader'
   ]

It works great. For production, I use ExtractTextPlugin(version 2.0.0-beta.4), and my Webpack configuration for this case looks 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, the assembly fails with the following error:

 Module build failed: Error: composition is only allowed
 when selector is single :local class name

Thus, it does not seem to add local prefixes. It is also mentioned in the documentation css-loader:

. extract-text-webpack-plugin css-loader/locals style-loader! css-loader . CSS, .

, : 'css-loader/locals', , , , .

postcss postcss-modules. , , , css.

Answer 1

, - . ExtractTextPlugin (2.0.0-beta.4) Webpack-1. :

 loader: ExtractTextPlugin.extract({
       fallbackLoader: 'style-loader',
       loader: [
           'css-loader?modules&importLoaders=1&localIdentName=[hash:base64:5]',
           'postcss-loader'
       ]
    }),