React.JS new CSS modules

Question

I have been following a tutorial on React Complete Guide on Udemy, but seems like it is a bit outdated, because after ejecting files, I don't see the same code. I think it is updated today, but as a complete beginner, I have no idea how to continue my course, since I do not know how to import classes which will have unique ID's or how to enable the CSS modules to work...Thank you for your help in advance.

What he sees : Starting from line 162 to 169 This is his code

 test: /\.css$/,
 use: [
   require.resolve('style-loader'),
   {
     loader: require.resolve('css-loader'),
     options: {
       importLoaders: 1,
       modules: true,
       localIdentName: '[name]__[local]__[hash:base64:5]'
     },
   },

And what I see : Starting from line 34 to 41 This is my code

// common function to get style loaders const getStyleLoaders =
(cssOptions, preProcessor) => {   const loaders = [
 require.resolve('style-loader'),
 {
   loader: require.resolve('css-loader'),
   options: cssOptions,
 },

And what I also see is that there are new variables for /\.css$/; : Line 28 to 32

// style files regexes 
const cssRegex = /\.css$/; 
const cssModuleRegex = /\.module\.css$/; 
const sassRegex = /\.(scss|sass)$/; 
const sassModuleRegex = /\.module\.(scss|sass)$/;

if this is Max's course you can message him directly and there is also a forum on udemy — Steve Bohmbach
– Steve Bohmbach, Commented Oct 3, 2018 at 15:09
it looks like create-react-app was just updated and it now supports css-modules with out the need to eject and update the webpack. If i find a good tutorial that explains how to use them in the new configuration i will add it. once you get past that point i dont think max does much more with the webpack config and you should be all set going forward — Steve Bohmbach
– Steve Bohmbach, Commented Oct 3, 2018 at 17:33

Sangam Belose · Accepted Answer · 2018-10-10 05:31:00Z

6

The code

options: {
       importLoaders: 1,
       modules: true,
       localIdentName: '[name]__[local]__[hash:base64:5]'
     }

shown above as tarting from line 162 to 169 can be added to the other field of webpack.config.dev.js and webpack.config.prod.js Instead of test: /\.css$/, you will find cssRegex and you can add the code in that section

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

edited Oct 10, 2018 at 5:31

Sangam Belose

4,5248 gold badges29 silver badges49 bronze badges

answered Oct 10, 2018 at 5:06

luky

2124 silver badges12 bronze badges

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

1 Comment

Andrii Over a year ago

I also follow a tutorial on React Complete Guide on Udemy and get the same error. In my case, it works for the file "webpack.config.js" and only with one option "modules: true". The option "localIdentIName" generated error. Hope it will be useful for someone else

theDreamer911 · Accepted Answer · 2021-02-24 05:03:02Z

1

For anybody, that maybe still have same issues, the best way to resolve this for me is to downgrade the react-scripts. I just make the package.json the same as the tutorial

After that, I run the setup by using npm i --force

Sorry, if this is not good one, but this is the best way to follow along with the tutorial

answered Feb 24, 2021 at 5:03

theDreamer911

1211 silver badge9 bronze badges

Comments

MOHAMMAD SIKANDAR · Accepted Answer · 2020-10-25 07:12:16Z

Replace this code from config/webpack.config.js

  {
              test: cssRegex,
              exclude: cssModuleRegex,
              use: getStyleLoaders({
              importLoaders: 1,
              sourceMap: isEnvProduction && shouldUseSourceMap,
              }),
              // Don't consider CSS imports dead code even if the
              // containing package claims to have no side effects.
              // Remove this when webpack adds a warning or an error for this.
              // See https://github.com/webpack/webpack/issues/6571
              sideEffects: true,
            },

To the below code

 {
      test: cssRegex,
      exclude: cssModuleRegex,
      use: getStyleLoaders({
        importLoaders: 1,
        sourceMap: isEnvProduction
            ? shouldUseSourceMap
            : isEnvDevelopment,
        modules: {
          getLocalIdent: getCSSModuleLocalIdent,
          localIdentName: '[name]__[local]__[hash:base64:5]'
        }

      }),
      sideEffects: true,
    },

nivedita katakam · Accepted Answer · 2021-04-08 19:15:58Z

0

If you're using react-scripts at a version higher than 1.0.X, you wouldn't need to worry about changing the webpack. Have your css renamed to SampleName.module.css and import using "import classes from 'SampleName.module.css' " to have CSS modules enabled in your project

answered Apr 8, 2021 at 19:15

nivedita katakam

1

Collectives™ on Stack Overflow

React.JS new CSS modules

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related