Webpack 2 CSS Modules support

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.

Voice Voice · Accepted Answer · 2016-12-08T08:57:19

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

Webpack 2 CSS Modules support

1 Answers