javascript - React Native：找不到模块'./App.module.css'或其相应的类型声明

Question

我正在尝试module css使用本机反应进行设置。我正在关注我最近正在阅读的这篇博客文章。我typescript用作编程语言。当我启动我的应用程序时，我收到以下错误：

undefined Unable to resolve module ./App.module.css 

这是我的package.json文件：

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "expo": "~42.0.1",
    "expo-status-bar": "~1.0.4",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
    "react-native-web": "~0.13.12"
  },
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@types/react": "~16.9.35",
    "@types/react-native": "~0.63.2",
    "babel-plugin-react-native-classname-to-style": "^1.2.2",
    "babel-plugin-react-native-platform-specific-extensions": "^1.1.1",
    "react-native-css-transformer": "^1.2.4",
    "typescript": "~4.0.0"
  },
  "private": true
}

这是我的babel.config.js：

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: [
      "react-native-classname-to-style",
      ["react-native-platform-specific-extensions", { extensions: ["css"] }],
    ],
  };
};

这是我的metro.config.js：

const { getDefaultConfig } = require("expo/metro-config");
module.exports = (async () => {
  const {
    resolver: { sourceExts },
  } = await getDefaultConfig(__dirname);
  return {
    transformer: {
      babelTransformerPath: require.resolve("react-native-css-transformer"),
    },
    resolver: {
      sourceExts: [...sourceExts, "css"],
    },
  };
})();

这是错误的来源App.tsx：

..

import { ballon } from "./App.module.css";

const Ballon = () => {
  return (
    <View style={ballon}>
      <Text>Ballon</Text>
    </View>
  );
};
..

我不知道这里可能是我的问题。

标签： javascriptreactjstypescriptreact-native