Expo Go项目中App.js无法引入App.css文件的问题求助

核心原因 #

Expo Go 基于 React Native 构建，React Native 原生不支持直接导入 .css 文件——即使你的文件路径完全正确，打包器也无法识别并解析这类Web端的CSS文件，这是导致模块无法找到的根本原因。

解决办法 #

1. 使用 React Native 内置的 StyleSheet（推荐）

React Native 提供了 StyleSheet API 来定义样式，替代Web端的CSS文件。将你的CSS样式转换为React Native支持的样式格式：

import React from 'react'
import { StyleSheet, View } from 'react-native'
import Header from './components/Header'
import { Routes, Route } from 'react-router-dom'
import Home from './pages/Home'
import About from './pages/About'
import Products from './pages/Products'
import Blog from './pages/Blog'

// 定义样式，对应原App.css的规则
const styles = StyleSheet.create({
  appContainer: {
    flex: 1,
    backgroundColor: '#ffffff',
    paddingHorizontal: 16,
    // 根据你的CSS需求添加其他样式，注意React Native样式属性采用驼峰命名（如paddingTop而非padding-top）
  }
})

function App() {
  return (
    <View style={styles.appContainer}>
      <Header />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/products" element={<Products />} />
        <Route path="/blog" element={<Blog />} />
      </Routes>
    </View>
  )
}

export default App

2. 使用 CSS-in-JS 库（如 styled-components）

如果习惯CSS语法，可以使用支持React Native的CSS-in-JS库，比如styled-components：

• 先安装依赖：

  npx expo install styled-components
  

• 改写代码：

  import React from 'react'
  import styled from 'styled-components/native'
  import Header from './components/Header'
  import { Routes, Route } from 'react-router-dom'
  import Home from './pages/Home'
  import About from './pages/About'
  import Products from './pages/Products'
  import Blog from './pages/Blog'
  
  // 用CSS语法定义组件样式
  const AppContainer = styled.View`
    flex: 1;
    background-color: #ffffff;
    padding-horizontal: 16px;
  `
  
  function App() {
    return (
      <AppContainer>
        <Header />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/products" element={<Products />} />
          <Route path="/blog" element={<Blog />} />
        </Routes>
      </AppContainer>
    )
  }
  
  export default App
  

3. 额外排查项（若确认要使用CSS文件）

如果你的项目是Expo Web项目（而非移动端），可以尝试以下操作：

• 确保运行项目时使用Web命令：npx expo start --web
• 检查scr/App.css文件名是否完全匹配（大小写、后缀名无误）
• 确认文件未被项目的.gitignore或打包配置排除

内容的提问来源于stack exchange，提问作者ShopEySwing