CSS Modules in React JS not working, i have tried literally everything but it didn't solved

Question

Everything seems correct but I don't know why I can't able to use CSS in my project. I have tried without writing module in CSS file's name but it didn't work. I have tried literally everything but none of those worked for me.

import React, { Component } from 'react';
import styles from './App.module.css';

class App extends Component {

  render(){

     return (
        <div>
           <h1 className={styles.blue}>Burger Builder</h1>
        </div>
     );
  } 
}

export default App;

My CSS File,

.blue{
color: blue;
}

Package.json file

{
   "name": "burger-builder",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "^1.1.5",
     "web-vitals": "^1.1.2"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
     "extends": [
       "react-app",
       "react-app/jest"
     ]
   },
   "browserslist": {
     "production": [
       ">0.2%",
       "not dead",
       "not op_mini all"
     ],
     "development": [
       "last 1 chrome version",
       "last 1 firefox version",
       "last 1 safari version"
     ]
   }
 }

Answer 1

Css Modules is related to react webpack config , which is hidden if you don't run nmp run eject .

I think Probebly You need to Update your react-script to use css modules , Otherwise you should add some configuration to your webpackConfig , to support css modules ,

1-update your react script if Not worked => 2- check if your using cra config if it didn't worked =>3- npm run eject then change webpack config for css loaders .

Answer 2

CSS 模块可用于 react-scripts@2.0.0 及更高版本。