How to Import a CSS File in a React Component

How to import a CSS file in a React Component

You need to use css-loader when creating bundle with webpack.

Install it:

npm install css-loader --save-dev

And add it to loaders in your webpack configs:

module.exports = {
  module: {
    loaders: [
      { test: /\.css$/, loader: "style-loader!css-loader" },
      // ...
    ]
  }
};

After this, you will be able to include css files in js.

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

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>

CSS file is applying on another react component even without importing

When importing a css file like you've done it will be injected into the project and not just into the component you're importing it from.

What you're looking for is css-modules (adding css-modules using create-react-app)

import React from 'react';
import styles from 'Home.css';

const Home = () => {
  return (
    <div className={styles.example}>
          Hi
    </div>
  )
}

How react.js managed to use a CSS file imported into a JavaScript file (component)?

This is actually a feature of the bundler your React app is using, like Webpack. See how Webpack enables importing CSS.

The example on Webpack's documentation looks something like the below snippet (I made some changes for clarity). Keep in mind that Webpack does not know what JSX is (that is Babel's job), so this uses vanilla DOM nodes.

src/style.css

.hello {
  color: red;
}

src/index.js

import './style.css';

function myComponent() {
  const element = document.createElement('div');

  element.innerHTML = 'Hello World';
  element.classList.add('hello');

  return element;
}

document.body.appendChild(component());

When you build your React application, Webpack takes all the styles in src/style.css, minifies them, and appends a link to the minified stylesheet inside the head tag of build/index.html.

So in your build/index.html, you would see something like the below link tag. You can also see this in the DOM with your inspector when you start the application.

build/index.html

<!doctype html>
<html lang="en">

<head>
  ...
  <link href="/static/css/main.ac7c7319.chunk.css" rel="stylesheet">
  ...
</head>

<body>
  ...
</body>

</html>

Of course the above file will also be minified, so it will not be so easy to read.

This is all made possible through Webpack's dependencies: style-loader and css-loader.

Closing thoughts

It is worth noting that CSS is never actually imported into JavaScript. As Create React App's documentation explains,

Webpack offers a custom way of 'extending' the concept of import beyond JavaScript.

So it is not actually a real import at all (which normally functions like require()).

How to Import a CSS File in a React Component