使用打字稿创建react-app css模块：无法解析.module.css

Question

我正在尝试将 css 模块与 typescript 和 create-react-app 反应应用程序一起使用。

我在我的

import './App.modules.css';

中做了

App.tsx

但出现错误：

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

Answer 1

我遇到了同样的问题，但这是我在文件名中犯的拼写错误，因此请再次检查您的拼写和语法。

Answer 2

将文件名更改为小写。

import './app.modules.css'