Cacher is the code snippet organizer for pro developers

const extractCSS = new ExtractTextPlugin('assets/[name].[hash].css');

{
    test: /\.css$/,
        use: extractCSS.extract({
          fallback: 'style-loader',
          use: [
            {
              loader: 'css-loader',
              options: {
                importLoaders: 1,
                modules: true,
                localIdentName: '[name]__[local]__[hash:base64:5]',
                camelCase: true,
                sourceMap: true
              }
            },
            'postcss-loader'
          ]
        }),
}

css-loader parses and converts our css, extracts it, stores it, AND supports css-modules. The addition of modules:true and localIndentName: [name]__[local]__[hash:base64:5] is critical for your styles, and your css classes getting unique names per component so that they don’t override each other globally across the application.

localIdentName:

[name]: refers to your css className.

[local]: allows css-loaders to assign it (the className) to a local component. In other words, scope it.

[hash:base64:5]: gives your className a unique hash to make sure you don’t overwrite your styles globally across your application.

camelCase: option converts your dashed css class names to camel case