Import css files and react components in a create-react-app application?

Question

I'm just starting with react.js and create-react-app application so excuse me if this is an obvious question.

My 'src' folder structure is like this:

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

In App.js I have this:

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

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

export default App;

In ComponentA I have this:

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;

In ComponentB I have this:

import React, { Component } from 'react';

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

export default ComponentB;

What I'm trying to do is just import ComponentB from ComponentA and also import the style for ComponentA but all this fall showing the following message:

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.

And if I remove the css import there is another error message:

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.

How can I import another component from another component and its respective css?

Thanks.

Solution

You need to make the paths you are importing are relative to the current location of the file doing the import.

The correct imports would be

 Component A

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

You can see this working at https://glitch.com/edit/#!/trashy-unicorn.
(Click on Show Live in top left hand corner.)

Currently what is happening with your error is

import ComponentB from './components/ComponentB';

is is looking in the path

src/components/components/ComponentB

which does not exist and so gives you an error. Same thing is happening with your styles.

Hope this helps.