CODEWITHSUNDEEP
javascriptcssreactjswebpack
Berin Aptula
Berin Aptula

Reputation: 224

React.JS new CSS modules

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)$/;

Upvotes: 8

Views: 2089

Answers (4)

nivedita katakam
nivedita katakam

Reputation: 1

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

Upvotes: 0

theDreamer911
theDreamer911

Reputation: 123

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

enter image description here

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

Upvotes: 1

MOHAMMAD SIKANDAR
MOHAMMAD SIKANDAR

Reputation: 169

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,
    },

Upvotes: 0

luky
luky

Reputation: 212

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]'
            }),

Upvotes: 6

Related Questions