CODEWITHSUNDEEP
javascriptreactjs
cyrus
cyrus

Reputation: 134

Enable css module in react 16.7

I am learning react looking videos but in one video they are enabling css module by eject>edit webpack.config.dev.js but i can't find the same file in my react , later i came to know that in 16.7 its different so can anyone tell the steps to enable css module in react 16.7

Upvotes: 1

Views: 975

Answers (3)

Sumit Tiwari
Sumit Tiwari

Reputation: 139

For react version 16.13
In webpack.config.js file find this keyword 'css-loader'.
You will find below code in line number 82 for react version-16.13
{
   loader: require.resolve('css-loader'),
   options: cssOptions,      
}

Replace above object with 

{
   loader: require.resolve('css-loader'),
   options: {
      modules: {
        mode: "local",
        localIdentName: "[name]_[local]_[hash:base64:5]"
      },
      import: true,
      importLoaders: true
    }     
}

Start the server again by npm start(If changes are not reflected)

Upvotes: 0

keen92
keen92

Reputation: 41

fortunately in react 16.8 no need to run "npm run eject" and you can just add extention ".module.css" in place of ".css" to get the sake of CSS module

Upvotes: 4

Muhammad Ali
Muhammad Ali

Reputation: 369

To enable CSS module, first of all go to your project directory then open command line and run npm run eject

inside the config folder you will find webpack.config.dev.js and webpack.config.prod.js files.open those files

and add this code to webpack.config.dev.js 

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

and in filewebpack.config.prod.js add

test: cssRegex,
exclude: cssModuleRegex,
loader: getStyleLoaders({
  importLoaders: 1,
  modules: true,
  localIdentName: '[name]__[local]__[hash:base64:5]',
  sourceMap: shouldUseSourceMap,
}),

After saving this you can now use CSS module

Upvotes: 2

Related Questions