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 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">

回答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.

回答3:

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>

回答4:

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.

回答5:

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

回答6:

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!