如何在create-react-app应用程序中导入css文件和react组件？

Question

我刚开始使用react.js和create-react-app应用程序，所以如果这是一个显而易见的问题，请原谅我。

我的'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;

在组件A中，我有这个：

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;

在 ComponentB 中，我有这个：

import React, { Component } from 'react';

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

export default ComponentB;

我想做的就是从“ComponentA”中导入“ComponentB”，并且也导入“ComponentA”的样式，但是所有这些都失败了，并显示以下消息：

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

如果我移除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？

谢谢。

- Walter Devia

Answer 1

您需要确保导入的路径相对于进行导入的文件的当前位置。

正确的导入方式为：

组件 A

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

您可以在https://glitch.com/edit/#!/trashy-unicorn上查看它的工作原理。
（单击左上角的“显示实时”）。

目前您的错误是发生了什么：

import ComponentB from './components/ComponentB';

正在查找路径

src/components/components/ComponentB

这个错误是因为你引用了一个不存在的东西所导致的，同样的问题也出现在了你的样式中。

希望这能有所帮助。

- Kevin Mccarthy

---

谢谢！这很有帮助。但是现在如何定位到“src/”文件夹中？例如，如何从位于“src/folderA/folderB/folderC/.../Component.jsx”的组件中导入位于“src”文件夹根目录中的模块？ - Walter Devia

你可以使用'../'返回上一级文件夹，例如： import '../styles/ComponentA.css'; 它会返回上一级并进入styles文件夹。你也可以使用'../../'返回上两级文件夹，以此类推。你需要计算你距离src文件夹有多远，然后不断添加'../'直到到达目标文件夹。 - Kevin Mccarthy

谢谢@kevin-mccarty，这对我很有帮助。 - Walter Devia