Setting modules to false in webpack config breaks all css

Question

I have the following webpack config and everything works perfectly:

    module: {
        rules: [
            {
                test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
                loader: 'url-loader',
                options: {
                    limit: 10000
                }
            },
            {
                test: /\.tsx?$/,
                exclude: /node_modules/,
                loader: "babel-loader",
                options: {
                    plugins: [
                        require('babel-plugin-transform-async-to-promises')
                    ]
                }
            },
            {
                test: /\.js$/,
                use: [ "source-map-loader" ],
                enforce: "pre"
            },
            {
                test: /\.(scss|css)$/,
                use: [ { loader:'style-loader'}, {loader : 'css-loader', options: {
                    modules: true,
                    sourceMap: IS_DEV,
                }}, {loader: 'sass-loader', options : {sourceMap: IS_DEV}} ]
            },
        ]
    },

However, when I try to set modules to false,

            {
                test: /\.(scss|css)$/,
                use: [ { loader:'style-loader'}, {loader : 'css-loader', options: {
                    modules: false,
                    sourceMap: IS_DEV,
                }}, {loader: 'sass-loader', options : {sourceMap: IS_DEV}} ]
            },

all of my project's css stops working. How do I fix my CSS while having modules set to false?

Answer 1

I solved this issue by replacing modules:false with

modules: {
    localIdentName: IS_DEV ? '[local]' : '[hash:base64:5]'
},

This makes it so that when running in dev mode (not production), the css classnames are visible and continue to work the same as in production. For more info, check out https://github.com/webpack-contrib/css-loader#modules