未找到模块：无法解析“答案

【问题标题】：Module not found: Can't resolve '未找到模块：无法解析“
【发布时间】：2021-07-17 11:53:42
【问题描述】：

我想在 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;

文件夹结构：

【问题讨论】：

是错误信息不清楚还是您在寻求什么样的帮助？
您的项目目录中的src 文件夹中是否有一个名为appStyles.css 的文件？如果不删除导入import './appStyles.css'，应该可以解决问题。
您能否提供您的应用程序文件夹结构的屏幕截图，我们可以在其中看到 appStyles.css 和 app.js 两者？

标签： javascript reactjs

【解决方案1】：

解决方案

将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/App.js Module not found: Can't resolve '.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 Line 25:21 : 'styles' 未定义 no-undef
import styles from './components/appStyles.module.css'; 也包含这一行。
我添加了，现在可以正常使用了。非常感谢！

【解决方案2】：

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

在您的照片之后，您需要将其导入，例如： import './components/appStyles.css'.

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

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

【讨论】：