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

Just add the below configuration to config/webpack.config.js after running npm run eject in the command line in the project folder and select yes when propted

Answer 2

Here is the solution:

yarn run eject

Go to the config/webpack.config.js

Update the file as the screenshot.

            // "postcss" loader applies autoprefixer to our CSS.
            // "css" loader resolves paths in CSS and adds assets as dependencies.
            // "style" loader turns CSS into JS modules that inject <style> tags.
            // In production, we use MiniCSSExtractPlugin to extract that CSS
            // to a file, but in development "style" loader enables hot editing
            // of CSS.
            // By default we support CSS Modules with the extension .module.css
            {
              test: cssRegex,
              exclude: cssModuleRegex,
              use: getStyleLoaders({
                importLoaders: 1,
                sourceMap: isEnvProduction && shouldUseSourceMap,
                modules: true,
                localIdentName:'[name]__[local]__[hash:base64:5]',
              }),
              // 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,
            },
            // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
            // using the extension .module.css
            {
              test: cssModuleRegex,
              use: getStyleLoaders({
                importLoaders: 1,
                sourceMap: isEnvProduction && shouldUseSourceMap,
                modules: true,
                getLocalIdent: getCSSModuleLocalIdent
              }),
            },

Answer 3

You have to configure some staff. follow these steps:

1. npm run eject run this command inside your project root directory

2. search cssRegex and add the following lines under use: getStyleLoaders({

       modules:true,
       localIdentName:'[name]__[local]__[hash:base64:5]'
   

Enjoy!