【发布时间】：2021-11-23 09:17:39
【问题描述】：
我正在尝试将 css 模块与 typescript 和 create-react-app react app 一起使用。
我在App.tsx 中输入了import './App.modules.css';，但出现错误：
Module not found: Can't resolve './App.modules.css' in 'C:\...\testapp\src'
但是，它适用于 const styles = require('./App.module.css');
那么我显然必须为我的样式使用类（classNames）......
如果我只使用普通标记名，例如 h1{ background-color: green; }
这些标签样式没有作用域，并被以后的样式覆盖...
作用域的 css 模块仅限于 css 类，而不是任何其他东西，例如标签、属性等，或者是否有解决方法？为什么我必须要求它们并且不能导入它们？ Typescript 有时还会抱怨找不到 .modules.css 的类型..？
{
"name": "testapp",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"@types/jest": "^26.0.23",
"@types/node": "^15.0.3",
"@types/react-dom": "^17.0.5",
"bootstrap": "^4.6.0",
"css-modules-typescript-loader": "^4.0.1",
"react": "^17.0.2",
"react-bootstrap": "^1.6.0",
"react-dom": "^17.0.2",
"react-icons": "^4.2.0",
"react-scripts": "4.0.3",
"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "^2.0.3",
"serve": "^11.3.2",
"typescript": "^4.2.4",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"serve": "serve -s build",
"db": "json-server --watch db.json"
},
"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"
]
},
"devDependencies": {
"@types/react": "^17.0.6",
"json-server": "^0.16.3"
}
}
【问题讨论】：
-
我认为您必须将所有 npm 库更新到最新版本。
-
我想我已经有了，见上面的 package.json
标签： css reactjs typescript create-react-app css-modules