Using css modules with Extract Text Plugin

Webpack 2 build doesn't work as expected in production mode using css modules option in css-loader with extract-text-webpack-plugin.

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.

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

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.

relevant part of config:

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
    ]
};

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

I'm using webpack version: 2.6.1 and extract-text-webpack-plugin: 2.1.2.

I also tried other versions, which didn't seem to help either.

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

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