修复 React 中的文件夹结构错误答案

【问题标题】：Fix folder structure errors in React修复 React 中的文件夹结构错误
【发布时间】：2020-02-14 02:15:47
【问题描述】：

我是 React 的新手，在我决定将我的代码组织到文件夹和子文件夹中之前，一切正常。现在我找不到这个模块，但它不是“无法解决'反应'，有一些答案。也许你们中的一些人可能知道这个愚蠢的事情。提前谢谢！我真的很感激！

这是编译错误 Image

这是我文件夹的图片 structure

这是我的 Header.js

import React from 'react';
import './Header/CSS/Header.css';

// Class will consist of Header design and structure
const Header = (props) => {
    return (
        <header className="App-header">
        <div className="container">
            <button className="btn">
              <span>About</span>
            </button>
            <button className="btn">
              <span>Experience</span>
            </button>
            <button className="btn">
              <span>Education</span>
            </button>
            <button className="btn">
              <span>Projects</span>
            </button>
            <button className="btn">
              <span>Contact</span>
            </button>
          </div>
      </header>
    )
};

export default Header;

这是我的 Header.css

/* 
  ========================
   HEADER Component
   CSS for the header   
  ========================
  */

 .App-header {
     background-color: black;
     min-height: 05vh;
     display: inline-flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     font-size: calc(10px + 2vmin);
     color: white;
     padding: 5vw;
 }

 /* 
  ========================
   HEADER BUTTONS
  ========================
  */

 .container {
     display: inline-flex;
     align-items: center;
     justify-content: center;
 }

 .btn {
     margin: 5%;
     display: inline-flex;
 }

这是我的 App.js

import React, { Component } from 'react';
import './App.css';
import Header from './Header/js/Header.js';
/* 
  ========================================
   App class
   Where everything is put together
   eg. Skeleton of my website
  ========================================
*/
class App extends Component {
  render() {
    return (
      <div className="App">
        <Header />
      </div>
    );
  }
}

export default App;

【问题讨论】：

您的Header.css 文件在哪里？您可能将其指向错误的路径。
好像是import './CSS/Header.css';
@BrunoMonteiro 我添加了我的文件夹结构的图像。
这能回答你的问题吗？ Can't resolve module (not found) in React.js

标签： javascript html css reactjs

【解决方案1】：

应该是

import '../CSS/Header.css';

../（2 点）返回一个文件夹，./（1 点）留在同一目录中。

因为你的结构看起来像这样：

. src
.. Header
.... CSS
...... Header.css
.... JS
...... Header.js

在Header.js 中使用../，会将您带到Header 文件夹。

【讨论】：

我明白了 -> ./src/Header/JS/Header.js Module not found: Can't resolve './CSS/Header.css' in 'C:\Users\leosu\桌面\我的网站\src\Header\JS'
我的错，这是一个错字。使用 2 个点。我更新了答案。
现在我明白了 - ./src/Header/JS/Header.js Module not found: Can't resolve './node_modules/react' in 'C:\Users\leosu \Desktop\my-website\src\Header\JS'
没问题！很高兴听到这个消息:)

【解决方案2】：

尝试将您的导入路径更改为import '.. /Header/CSS/Header.css';

【讨论】：

如果我这样做，我会得到这个 ./src/Header/JS/Header.js Module not found: Can't resolve '../Header/CSS/Header.css' in 'C :\Users\leosu\Desktop\my-website\src\Header\JS'

【解决方案3】：

在您的配置文件中，例如 webpack config 或 Babel，您需要使用与操作系统无关的方法来查找文件，因为：

Windows 使用\，其他一切使用/

所以需要Node内置的path模块

const path = require('path')

在你的配置文件中使用path 和__dirname

// "target": "./dist"
"target": path(__dirname, '/dist')

【讨论】：