问题描述
一切似乎都正确,但我不知道为什么我不能在我的项目中使用 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 Modules 与 react webpack config 相关, 如果你不运行 nmp run eject ,这是隐藏的。
我认为可能您需要更新您的 react-script 以使用 css 模块, 否则你应该在你的 webpackConfig 中添加一些配置,以支持 css 模块,
1-更新你的反应脚本 如果不起作用 => 2- 检查您是否使用 cra 配置 如果它不起作用 =>3- npm run eject 然后更改 css 加载器的 webpack 配置。
,CSS modules is available with react-scripts@2.0.0 and higher.