React : CSS class name import not working - reactjs

Question

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

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

Answer 2

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 3

You have to configure some staff. follow these steps:
npm run eject run this command inside your project root directory
search cssRegex and add the following lines under use: getStyleLoaders({
modules:true,
localIdentName:'[name]__[local]__[hash:base64:5]'
Enjoy!

Answer 4

Make sure 'npm run eject' run successfully then you can access webpack.config.js file in config folder.
Stop the server.
Go to webpack.config.js
Find cssRegex and update as given in the image
Restart the server

Answer 5

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 6

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 7

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 8

To use class names like an object you need to do 2 things:
Write import like import * as classes from './Layout.css';
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 9

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 10

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 11

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

Answer 12

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 13

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 14

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.

Answer 15

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