Migrate to webpack2 and css modules is not working

[aj120426394]

I move one of my project to webpack 2 recently. I currently only test on webpack-dev-server mode and seems every things work fine except css module.
Here is part of my webpack configuration which relate to css module:

version:
css-loader: 0.14.5 (for the better performance)
sass-loader: 6.0.3
webpack: 2.3.3
webpack-dev-server: 2.4.2

module:{
    rules: [
        {
            test: /\.css$/,
            loader: extractCSS.extract({
                fallback: 'style-loader',
                use: [
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: env === 'development'
                        }
                    },
                    postCssLoader
                ]
            })
        },
        {
            test: /\.scss$/,
            use: [
                'style-loader',
                {
                    loader: 'css-loader',
                    options: {
                        sourceMap: env === 'development',
                        modules: true,
                        importLoaders: 3,
                        localIdentName: '[hash:base64]-[name]-[local]'
                    }
                },
                postCssLoader,
                {
                    loader: 'resolve-url-loader'
                },
                {
                    loader: 'sass-loader',
                    options: {
                        sourceMap: true,
                        includePaths: []
                    }
                }
            ]
        }
    ]
}

When I import the .scss file into .js file as beneath, the className of div shows nothing, and the className of h4 only show that class='text-white'. I tried to console.log out the imported variable and it shows an empty object.

import styles from '../style/layout/_l-header.scss';
<div className={styles.header}>
      <h4 className={classnames(styles.header__title, 'text-white')}>
           testing
       </h4>
</div>

I did another testing which make an error code in '_l-header.scss' that can generate some error message in Terminal to prove I use the right configuration of css-module. And here is the error message:

ERROR in ./~/css-loader?{"sourceMap":true,"modules":true,"importLoaders":3,"localIdentName":"[hash:base64]-[name]-[local]"}!./~/postcss-loader?{}!./~/resolve-url-loader!./~/sass-loader/lib/loader.js?{"sourceMap":true,"includePaths":[]}!./app/style/layout/_l-header.scss
Module build failed: 
  @extend .blue;
         ^
      ".header" failed to @extend ".blue".

According to the message above, I think the loader configuration is correct. Does anyone engage the same issue, or have some solution for this?

I'll really appreciate that!!

[michael-ciniawsky]

css-loader: 0.14.5 (for the better performance)

😛 That's the reason I guess, if I remember right css-loader < v0.15.0 didn't use PostCSS and therefore has no { modules: true } (CSSModules), could you try with latest css-loader and see if your config works? You're right css-loader has some perf issues, but these are more related to the bloated code base and we're working on that 😉

[aj120426394]

Thanks @michael-ciniawsky !

After I update to the latest css-loader version, it works!