React JS 中的 CSS 模块不起作用，我已经尝试了所有方法，但没有解决

Posted 2023-02-21

【中文标题】React JS 中的 CSS 模块不起作用，我已经尝试了所有方法，但没有解决

【英文标题】：CSS Modules in React JS not working, i have tried literally everything but it didn't solved

【发布时间】：2021-09-05 08:06:10

【问题描述】：

一切似乎都是正确的，但我不知道为什么我不能在我的项目中使用 CSS。我尝试过不以 CSS 文件名编写模块，但它没有用。我几乎尝试了所有方法，但没有一个对我有用。

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;

我的 CSS 文件，

.blue
color: blue;

Package.json 文件

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

【问题讨论】：

请尝试使用普通CSS，导入'./App.module.css'； className="蓝色"

【参考方案1】：

Css Modules 与 webpack config 相关， 默认情况下隐藏在 cra 中。（如果你还没有运行 npm runeject。）

我认为您可能需要更新您的 react-script 以使用 css 模块：

npm update react-scripts

否则你应该在 webpackConfig 中添加一些配置，以支持 css 模块，

请注意： CSS modules is available with react-scripts@2.0.0 and higher.

如果 不起作用 检查您是否使用 cra 配置 如果它不起作用 使用自己配置 css 模块：

npm run eject

然后更改 css 加载器的 webpack 配置。

【参考方案2】：

CSS modules is available with react-scripts@2.0.0 and higher.