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
Top comments (2)
A misleading title with no useful information at all (IMHO).
Surely it's gonna work for smth like create-react-app (because , but it does not answer the question of how to actually import .css (and basically any file other than JS modules) in react (and basically in any JavaScript file)
For anyone who accidentally spots this article and is interested in it just google webpack, webpack loaders or any other loaders in any other bundlers (parcel, esbuild, rollup)
FYI, inside a JS file you cannot import anything other that another JS-module so you need something that searches for code that imports .css, then transforms that .css module into a JS module and replaces the .css import with an ordinary JS import
(correct me if I'm wrong, interesting to know other ways to do it)
Hi, thanks for the input,
but the title is 100% fine (it tells "How to import CSS in React.js component", and I show exactly that).
Webpack configuration and loaders are a topic that we'll cover in another episode, and the title would be misleading if I'd show how to config webpack loaders in the current episode :)
Still, some people would like to know how to just import CSS files into the react component, so in this episode, we wanted to show how to do it in the simplest way.