React : CSS class name import not working

问题

i have a <main> 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 div when i try to inspect it in the browser. when i simply use other class names its working like <main className="test"> but importing classes is not working.

This is my component :

import React from 'react';
import Aux from '../../hoc/Aux';
import classes from './Layout.css';

const layout = (props) => (
<Aux>
    <div>
        Test paragraph
    </div>
    <main className={classes.Content}>
        {props.children}

    </main>
</Aux>
);

export default layout;

This is my css

.Content{
   color: red;
   margin-top: 20px;
}

I did npm run eject command after creation, if there is something to do with the webpack configuration file please help me ( i haven't made any changes there after eject command )

Here is the css part of webpack dev config file

{
        test: cssRegex,
        exclude: cssModuleRegex,
        use: getStyleLoaders({
          importLoaders: 1,
        }),
      },
      // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
      // using the extension .module.css
      {
        test: cssModuleRegex,
        use: getStyleLoaders({
          importLoaders: 1,
          modules: true,
          getLocalIdent: getCSSModuleLocalIdent,
        }),
 },

回答1:

import './Layout.css';

Then use it like a normal CSS

<main className="Content">

You can also use your classes as objects with this format:

In your CSS file:
Wrap your classes and id's with :local(.className)

Example
:local(.Content) { width: 100px; }

In your React Component:
import classes from './stylesheet.css'

<div className={classes.Content}></div>

回答2:

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!

回答3:

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

回答4:

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.

回答5:

To use class names like an object you need to do 2 things:

1. Write import like import * as classes from './Layout.css';
2. Include typings defenition for your style.

Example for Typescript - create Layout.css.d.ts file with export const Content: string;

Be sure that you define camelCase option for css-loader to resolve dash-classes into camel-case properties that you define in Layout.css.d.ts.

回答6:

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

回答7:

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

回答8:

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

来源：https://stackoverflow.com/questions/53572200/react-css-class-name-import-not-working