This article was originally published at https://www.blog.duomly.com/6-most-popular-front-end-interview-questions-and-answers-for-beginners-part-2/#how-to-import-css-in-react-js-component

Now I’ll show you how to import CSS in react.js components, by the two most easy, and kinda popular ways.

When we build apps in React.js in some cases, we can use CSS-frameworks like bootstrap, Bulma, or something popular now.

Next, we can build a layout like puzzles and focus only on things like Javascript or Typescript logic.

But sometimes, we need to create our own styling even I’d say that can happen kind of often, and how can we solve that?

There are a few methods of including CSS into the React.js components, some of them are more complicated, some less, but all of them have pros and cons.

Anyway, today I’ll show you one of them, the easiest one, and the quickest to implement.

I like to use that method, especially in the bigger projects, when we need to have all the styles sorted and put into the separate folders.

We can import the sass file into our files by using a relative import path.

With that method, we can create a directory “styles” inside our project directory, sort all of the style files by feature, function or how we want, and import the file into our component directly.

It helps us sort all the helpers, variables, and necessary style up to files, where it’s needed, but still can be kept in one place.

import './styles.scss';

Thank you for reading,
Radek from Duomly