How to import external css file inside the react component file which is inside the component folder?

user_13011832 0
Viewed 45

I tried giving path the to the file 'import '../App.css';' but I get this error

ERROR in ./src/components/Card/Card.js 5:0-20

Module not found: Error: Can't resolve '../App.css' in 'E:\react_projects\comment_cards\src\components\Card'

I think I am giving the path wrong.

reactjs
3 Answers
import "./component_name/filename.css"

this is the usual way to import css files, but if you are on same folder you can just use

import "./filename.css"

you can also use inline styles in components like

const styles = {
  section: {
    fontSize: "18px",
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 20px"
  },
  wrapper: {
    textAlign: "center",
    margin: "0 auto",
    marginTop: "50px"
  }
}

and implement like below

<section style={styles.section}>
  <div style={styles.wrapper}>
  </div>
</section>
user_45422410

If you have created your App.css in same folder as your App.js it means that, when importing the file, you have to go back to that path.

Given your apparent path:

src/components/Card/Card.js

You will have to make the following import:import classes from '../../App.css'

Please note that in React we usually use classes as a name of the import. If you have to give to a component a class, let's name in .button-content, you will do it like this : <MyButton className={classes.buttonContent> My Button </MyButton>

user_191001140

import "./components/App.css"

But it depends on from which folder you're importing the module. For example if you're in component folder and your css file also inside component folder you can use import "./App.css"

but if you are in the src folder and your css module is in component folder you need to import like this import "./components/App.js"

user_177111420
Related