Enable css module in react 16.7

Question

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

It's a webpack configuration, so it shouldn't matter which react version you have. After ejecting, search die sub directories of your project for files named like webpack*.js — Patrick Hund
– Patrick Hund, Commented Feb 11, 2019 at 10:01
i found one but in that also there is different structure , so where to add Modules:true, LocalIdentName: etc — cyrus
– cyrus, Commented Feb 11, 2019 at 10:03

keen92 · Accepted Answer · 2019-05-12 15:00:25Z

4

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

answered May 12, 2019 at 15:00

keen92

412 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Muhammad Ali · Accepted Answer · 2019-02-11 10:05:48Z

2

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

answered Feb 11, 2019 at 10:05

Muhammad Ali

3697 silver badges25 bronze badges

1 Comment

cyrus Over a year ago

ok i found first one but not the second one i.e config.prod.js , but it helped me thanks

Sumit Tiwari · Accepted Answer · 2020-10-10 11:58:14Z

0

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)

answered Oct 10, 2020 at 11:58

Sumit Tiwari

1391 silver badge8 bronze badges

Collectives™ on Stack Overflow

Enable css module in react 16.7

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related