Javascript 未找到模块：Can'；t解决'；

我想在VisualStudio代码中显示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;

import React，{Component}来自“React”
从“./logo.svg”导入徽标
导入“./App.css”
从“./components/Greet”导入问候语
从“./components/Welcome”导入欢迎
从“./components/Hello”导入Hello
从“./components/Message”导入消息
从“./components/Counter”导入计数器
导入功能从“./components/FunctionClick”中单击
从“./components/ClassClick”导入类单击
从“./components/EventBind”导入EventBind
从“./components/ParentComponent”导入ParentComponent
从“./components/UserGreeting”导入UserGreeting
从“./components/NameList”导入名称列表
从“./components/Stylesheet”导入样式表
从“./components/Inline”导入内联
导入“./appStyles.css”
从“./appStyles.module.css”导入样式
类应用程序扩展组件{
render（）{
返回(
错误
成功
{/* */}
{/* */}
{/* */}
{/*  */}
{/* */}
{ /* */}
{ /* */}
{ /* */}
{ /* */}
{/*
这是儿童道具

行动
*/}
{/*
*/} 
{/*
*/}
{/* */}
);
}
}
导出默认应用程序；

文件夹结构：

---

错误意味着您的

.css

文件不在您放置它的路径中。 你可以把你的文件夹截图，让我们帮助你

在您的照片之后，您需要将其导入，如：

import./components/appStyles.css'

另外，对于第二个导入的样式，您需要执行相同的操作，否则将无法工作，因为这两个样式都位于

components

文件夹中

作为一条建议，您可以创建另一个文件夹来更好地组织项目，例如：

Styles

并将所有

.css

文件放在那里。

解决方案 将

import

语句更改为

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

解释：

---

• 你的

  app.js

  在=>

  src/app.js

• 您的

  appStyles.css

  位于=>

  src/components/appStyles.css内部

• 这就是为什么import语句应该是=>

  import./components/appStyles.css'

---

---

错误消息是否不清楚，或者您正在寻求何种帮助？您的项目目录中的

src

文件夹中是否有名为

appStyles.css

的文件？如果不删除import

import./appStyles.css'

，应该可以解决这个问题。你能提供你的应用程序的文件夹结构的屏幕截图，我们可以看到appStyles.css和app.js吗？我理解解释，我做了建议的更改，现在出现如下错误：./src/App.js模块未找到：无法解析“.components/appStyles.css”中的“C:\Users\Alex\Desktop\React\hello world\src”如何更改？像这样或

.components/appStyles.css

或

/components/appStyles.css

我这样写：.components/appStyles.css，现在我这样更正：./components/appStyles.css，但现在它出现了另一个错误：src\App.js行25:21：“样式”没有定义没有未定义的

从导入样式“./components/appStyles.module.css”也包括这一行。我添加了，现在它可以正常工作了。非常感谢你！