in react 16.13 and [email protected] and higher you don't need to eject your project. Your CSS files must be named camelCase + .modules.css and import to your projects like this:

import React, { Component } from 'react';
import styles from './app.module.css'; // Import css modules stylesheet as styles
class App extends Component {
  render() {
    return <button className={styles.test}>Error Button</button>;
  }
}
export default App;

and in app.module.css

.test{
  color: blue;
}

if you eject projects, in webpack.config.js file, in css modules change like this:

   test: cssRegex,
              exclude: cssModuleRegex,
              use: getStyleLoaders({
                importLoaders: 1,
                sourceMap: isEnvProduction && shouldUseSourceMap,
                modules: true,

The mistake you are doing here is your are calling your css with a name

Example:

import classes from "./BurgerIngredients.css";

And then you are using inline to append the class name like this

Example:

 <div className={classes.Meat}></div>;

Your css class names are not object so you cannot call it like this.

Instead all you have to do is just import the css like this (Make sure css file is in the same folder as the js file because here we are calling the file by ./ )

Example:

 import "./BurgerIngredients.css";

And use the className just like you would do in a normal html like this

Example:

 <div className="BreadBottom"></div>;

In order for react to understand your css file is a css-module, you need to add the suffix .module to the file name while using a react-script version newer than 2.0.0.

Simply rename addTask.css to addTask.module.css and change the import to:

import styles from './addTask.module.css'

To enable CSS module in to your app, you don't need to eject create-react-app. You can follow these simple steps described in this link to use CSS module in your project.

But in case if you ejected your create-react-app, then you must find file named

"webpack.config.js"

open this file and find this {test:cssRegex....etc} in line no. 391 and replace to this changes:

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

Open .js file and import statement like this

Copyimport cssStyleClassName from './MyApp.css';

Then this import statement allow you to do following changes in component tags like this

Copy<div className={cssStyleClassName.styleName}></div>

styleName is what you defined in your MyAppStyle.css file

Copy.styleName{
your properties here...
}

After eject your app, you must restart your local server, sometime changes don't get reflect.

Note In earlier version there were two generated file for production and dev separately. Now in current version one file named "webpack.config.js" file for which you need to concerned for changes. Thank you.

Your problem might be because of old react-scripts version.Just update your react-scripts version more than 2.0.3.

npm install --save-dev --save-exact [email protected]