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

Answer 1

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