React : CSS class name import not working

Question

i have a

div in my react component and im importing some class name from a class css file, but the class name is not getting integrated to the main

Answer 1

Actually I've used it like this:

import classes from './Layout.module.css';

As you see in the text of your question:

// using the extension .module.css

Answer 2

Don't you need to specify the file's extension like import classes from './layout.css';?

Try to instal style-loader and css-loader packages. Then add to you webpack this:

{
    test: /\.css$/,
    loaders: [
        'style-loader?sourceMap',
        'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
    ]
}

I got if from css-modules documentation and I hope it will help you to achieve what you need.

Answer 3

this works for me

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

}

Answer 4

I was also working on a react tutorial and faced same issue.

I updated my webpack.config.js file at line 420 and it was working for me then. Please try it out.

line 420:

• localIdentName:'[name][local][hash:base64:5]',

Answer 5

Make sure 'npm run eject' run successfully then you can access webpack.config.js file in config folder.

1. Stop the server.
2. Go to webpack.config.js
3. Find cssRegex and update as given in the image
4. Restart the server

Answer 6

I have noticed many reference to test: cssRegex block, though you may not have it in the webpack config. If the above is your case try to open webpack.config.dev.js and find block starting with test: /\.css$/, (row 160 in my case). Then add the following lines so final result looks like this:

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

This should enable css modules to work.