Javascript 在创建react应用程序中导入css文件和react组件？

我只是从react.js开始创建react应用程序，如果这是一个明显的问题，请原谅

我的“src”文件夹结构如下所示：

scr/
....components/
........ComponentA.jsx
........Componentb.jsx
....styles/
........ComponentA.css
....App.css
....App.js
....App.test.js
....index.css
....index.js
...OTHER DEFAULT FILES

在App.js中，我有以下内容：

import React, { Component } from 'react';
import ComponentA from './components/ComponentA';

class App extends Component {
  render() {
    return (
      <div className="App">
        <ComponentA />
      </div>
    );
  }
}

export default App;

import React, { Component } from 'react';
import './styles/ComponentA.css';
import ComponentB from './components/ComponentB';

class ComponentA extends Component {
  render() {
    return (
      <div className="componentAStyle">
        <ComponentB />
      </div>
    );
  }
}

export default ComponentA;

import React, { Component } from 'react';

class ComponentB extends Component {
  render() {
    return (
      <div>
        <h1>Hello from ComponentB</h1>
      </div>
    );
  }
}

export default ComponentB;

在

组件b

中，我有以下内容：

import React, { Component } from 'react';
import ComponentA from './components/ComponentA';

class App extends Component {
  render() {
    return (
      <div className="App">
        <ComponentA />
      </div>
    );
  }
}

export default App;

import React, { Component } from 'react';
import './styles/ComponentA.css';
import ComponentB from './components/ComponentB';

class ComponentA extends Component {
  render() {
    return (
      <div className="componentAStyle">
        <ComponentB />
      </div>
    );
  }
}

export default ComponentA;

import React, { Component } from 'react';

class ComponentB extends Component {
  render() {
    return (
      <div>
        <h1>Hello from ComponentB</h1>
      </div>
    );
  }
}

export default ComponentB;

如果删除css导入，则会出现另一条错误消息：

Failed to compile
./src/components/ComponentA.jsx
Module not found: Can't resolve './components/ComponentB' in 'C:\xampp\htdocs\custom-k39\src\components'
This error occurred during the build time and cannot be dismissed.

如何从另一个组件及其各自的css导入另一个组件

---

谢谢。

您需要使您导入的路径相对于执行导入的文件的当前位置

正确的进口应该是

A部分 您可以在上看到此操作。
（单击左上角的ShowLive。）

目前你的错误是

import ComponentB from './components/ComponentB';

他正在看路

src/components/components/ComponentB

这是不存在的，所以给你一个错误。同样的事情也发生在你的风格上

---

希望这有帮助。

谢谢！它帮助了我。但现在如何定位在“src/”文件夹中？e、 g.如何从位于“src/folderA/folderB/folderC/../component.jsx”中的组件导入位于“src”文件夹根目录中的模块？您可以使用“../code>导入”../styles/ComponentA.css”返回一个文件夹级别它返回一个级别，然后进入样式文件夹。您可以返回两个带有“../../”的文件夹，以此类推。你需要计算你离src文件夹有多远，然后继续添加“../”直到你到达那里。谢谢@kevin mccarty它帮助了我