[英]CSS Modules in React JS not working, i have tried literally everything but it didn't solved
Everything seems correct but I don't know why I can't able to use CSS in my project.一切似乎都是正确的,但我不知道为什么我不能在我的项目中使用 CSS。 I have tried without writing module in CSS file's name but it didn't work.
我试过在 CSS 文件名中不写模块,但它没有用。 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,我的 CSS 文件,
.blue{
color: blue;
}
Package.json file 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 Modules is related to react webpack config , which is hidden if you don't run nmp run eject . CSS Modules 与 react webpack config 相关,如果你不运行 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 ,我认为 Probebly 您需要更新您的 react-script 以使用 css modules ,否则您应该向您的 webpackConfig 添加一些配置,以支持 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 . 1-如果不起作用,请更新您的反应脚本 => 2- 检查您是否使用 cra 配置,如果它不起作用 =>3- npm run eject 然后更改 css 加载器的 webpack 配置。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.