Исправить ошибки структуры папок в React

Question

Я новичок в React и у меня все работало, прежде чем я решил организовать свой код в папках и подпапках. Прямо сейчас я получаю этот Модуль не найденным, но это не «Не могу решить», ответь на который были некоторые ответы. Может быть, некоторые из вас могут знать эту глупость. Заранее спасибо! Я действительно ценю это !

Вот ошибка компиляции Изображение

Вот изображение моей папки структура

Вот мой Заголовок. 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;

Вот мой Заголовок. 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;
 }

Вот мое приложение. 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;

Answer 1

Это должно быть

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

../ (2 точки) возвращает одну папку, а ./ (1 точка) остается в той же директории.

Поскольку ваша структура выглядит так:

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

Использование ../ внутри Header.js приведет вас к папке Header.

Answer 2

В ваших конфигурационных файлах, таких как webpack config или Babel, вам нужно будет использовать метод поиска файлов agnosti c, поскольку:

Windows использует \, а все остальное использует /

Требуется встроенный в Node модуль path

const path = require('path')

И в ваших конфигурационных файлах используйте path и __dirname

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

Answer 3

Попробуйте изменить маршрут импорта на import '.. /Header/CSS/Header.css';