Using css modules with Extract Text Plugin : <p>Webpack 2 build doesn't work as expected in production mode using css modules option in css-loader with extract-text-webpack-plugin.</p>

<p>the correct generated classes are created on html elements, implying that css-loader is working as intended, but the extracted css file from the extract-text-webpack-plugin is lacking the css identifiers.</p>

<p>I'm using a method for implementing both global css and css modules together as discussed here: <a href="https://github.com/css-modules/css-modules/pull/65" rel="noreferrer">https://github.com/css-modules/css-modules/pull/65</a>
and here: <a href="https://github.com/kitze/custom-react-scripts/issues/29" rel="noreferrer">https://github.com/kitze/custom-react-scripts/issues/29</a>.</p>

<p>I'm using different loader tests for files which end with .css and files which end with .cssm.css indicating that they should be loaded using modules.</p>

<p>relevant part of config: </p>

<pre><code>const extractTextPlugin = new ExtractTextPlugin({filename: '[name].[id].[contenthash].css', allChunks: true});

return {
    module: {
        rules: [
            {
                test: /\.cssm.(css|less)$/,
                loader: extractTextPlugin.extract({
                    fallbackLoader: 'style-loader',
                    loader: [
                        {
                            loader: 'css-loader',
                            query: {
                                importLoaders: 1,
                                modules: true,
                                localIdentName: '[name]_[local]_[hash:base64:5]'
                            }
                        },
                        {
                            loader: 'postcss-loader',
                            query: {
                                ident: 'postcss',
                                plugins: function() {
                                    return [
                                            require('autoprefixer')
                                    ];
                                }
                            }
                        },
                        {
                            loader: 'less-loader'
                        }
                    ]
                })
            },
            {
                test: /\.(css|less)$/,
                include: paths,
                loader: extractTextPlugin.extract({
                    fallbackLoader: 'style-loader',
                    loader: [
                        {
                            loader: 'css-loader',
                            query: {
                                importLoaders: 1
                            }
                        },
                        {
                            loader: 'postcss-loader',
                            query: {
                                ident: 'postcss',
                                plugins: function() {
                                    return [
                                            require('autoprefixer')
                                    ];
                                }
                            }
                        },
                        {
                            loader: 'less-loader'
                        }
                    ]
                })
            }
        ]
    },
    plugins: [
        extractTextPlugin
    ]
};
</code></pre>

<p>I have tried suggested solutions like using webpack 1 style of writing loaders, but that didn't help.</p>

<p>I'm using webpack version: 2.6.1
and extract-text-webpack-plugin: 2.1.2.</p>

<p>I also tried other versions, which didn't seem to help either.</p>

<p>my global css files work fine, only the imported .cssm.css files are being ignored when used with extract-text-webpack-plugin. </p>

<p>How do I fix the problem of css module files not being extracted properly with other global css?</p>
