![](/img/trans.png)
[英]My toggler is not working. I have tried placing js cdn in top and bottom both but didn't work
[英]CSS Modules in React JS not working, i have tried literally everything but it didn't solved
一切似乎都是正確的,但我不知道為什么我不能在我的項目中使用 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 ,它是隱藏的。
我認為 Probebly 您需要更新您的 react-script 以使用 css modules ,否則您應該向您的 webpackConfig 添加一些配置,以支持 css modules ,
1-如果不起作用,請更新您的反應腳本 => 2- 檢查您是否使用 cra 配置,如果它不起作用 =>3- npm run eject 然后更改 css 加載器的 webpack 配置。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.