ALWAYS ABHINAV

KEEP CALM AND FOLLOW ME

Making CSS Modules in React Work with Webpack 4

If you are working with a React app and would like to have CSS modules (where CSS classes are scoped for the component only and are not public) then earlier you needed to:

  1. npm run eject
  2. Under config folder modify the webpack.config.dev.js and webpack.config.js (for production) with code mentioned in point 3
  3. ¬†Find “test: /\.css$/, and under ‘options’ add modules: true, localIdentName:'[name]_[local]_[hash:base64:5]

With Webpack 4 CSS modules work out of the box all you need to do is

  1. npm run eject
  2. ¬†name your css files with ‘.module.css’ e.g., ‘layout.module.css’

 

But if you still want to use the method 1, the same can be achieved as follows:

test: cssRegex,
exclude: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
modules: true,
localIdentName: ‘[name]__[local]__[hash:base64:5]’
}),

LEAVE A RESPONSE

Your email address will not be published. Required fields are marked *