找不到模块：无法解析'

Question

我想在 Visual Studio 代码中显示来自 react js 项目的几句话，但出现错误。 在 App.js 组件中，我导入了一个 css 文档，这件事导致页面显示错误：

未找到模块：无法解析“C:\Users\Alex\Desktop\React\hello-world\src”中的“./appStyles.css”

这是来自 App.js 组件的代码：

import React, { Component } from 'react'
import logo from './logo.svg'
import './App.css'
import Greet from './components/Greet'
import Welcome from './components/Welcome'
import Hello from './components/Hello'
import Message from './components/Message'
import Counter from './components/Counter'
import FunctionClick from './components/FunctionClick'
import ClassClick from './components/ClassClick'
import EventBind from './components/EventBind'
import ParentComponent from './components/ParentComponent'
import UserGreeting from './components/UserGreeting'
import NameList from './components/NameList'
import Stylesheet from './components/Stylesheet'
import Inline from './components/Inline'
import './appStyles.css'
import styles from './appStyles.module.css'

class App extends Component {
  render() {
    return (
     <div className="App">
     <h1 className='error'>Error</h1>
     <h1 className={styles.success}>Success</h1>
     <Inline /> 
     {/*<Stylesheet primary={true} /> */}
     {/*<NameList /> */}
     {/*<UserGreeting /> */}
     {/* <EventBind /> */}
     {/*<ParentComponent /> */}
     { /*<FunctionClick /> */}
     { /*<ClassClick /> */}
      { /*<Counter /> */}
       { /*<Message /> */}
       {/*<Greet name="Bruce" heroName="Batman">
        <p>This is children props</p>
        </Greet>
        <Greet name="Clark" heroName="Superman">
         <button>Action</button>
        </Greet> */}
        {/*<Greet name="Diana" heroName="Wonder Woman" />
        <Welcome name="Bruce" heroName="Batman" /> */} 
        {/*<Welcome name="Clark" heroName="Superman" />
        <Welcome name="Diana" heroName="Wonder Woman" /> */}
        {/*<Hello /> */}
     </div>
    );
  }
}

export default App;

文件夹结构：

Answer 1

该错误意味着您的 .css 文件不在您放置的路径中。 您可以将您的文件夹截图，让我们为您提供帮助。

在您的照片之后，您需要像这样导入它： import './components/appStyles.css'。

对于第二个导入的样式，您也需要这样做，否则将无法使用，因为两者都在 components 文件夹中。

作为一条建议，您可以创建另一个文件夹来更好地构建您的项目，例如：Styles 并将您所有的 .css 文件放在那里。

Answer 2

解决方案

将 import 语句更改为

import './components/appStyles.css';
import styles from './components/appStyles.module.css';

说明：

---

• 你的 app.js 在里面 => src/app.js
• 你的 appStyles.css 在里面 => src/components/appStyles.css
• 这就是为什么导入语句应该是 => import './components/appStyles.css'

---