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

For latest version no need to set

localIdentName: '[name][local][hash:base64:5]', // no need set any where

Just give your css name with postfix like FileName.module.css ex Personal.module.css

Then class name like below filename_classname_randomstring

Personal_Person__3L9tz

it working for me

Answer 2

the other answers not worked for me so I used this solution and worked fine

1: run the npm run eject command

2: go to config/webpack.config.js and search for cssRegex

3: use this code in that particular section

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

Answer 3

If you're using Windows, don't name file 'Aux' it's reserved name.

Solution is just to name your CSS files as (in your case) Layout.module.css and then import them as such.

You don't need to eject as from the Create React App 2.0 since it uses CSS Modules out of the box.

Answer 4

None of the above solutions worked for me, if you're using a react version with react-scripts@2.0.0 and higher, they probably wouldn't work for you either.

you must used the CSS Modules alongside regular stylesheets using the [name].module.css file naming convention. CSS Modules allows the scoping of CSS by automatically creating a unique classname of the format [filename]_[classname]__[hash].

example Header.module.css nb: header here can be any name

Answer 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.

Answer 6

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>