How to add SCSS styles to a React project?

Question

I'm just starting to learn React (have some JavaScript knowledge, as I'm learning tis as well) and building my first project. I would like to know how to add styles to my first React project, using CSS/SCSS as I have some knowledge and understanding from my html, CSS/SCSS learning projects.

How do you add SCSS to your React Project?

Laurinelaurita

Create React app docs here for this: create-react-app.dev/docs/adding-a-sass-stylesheet – Gibbet

Answer 1

The way to use scss depends a bit on your React development environment. For beginners React recommends using Create React App which is, according to them, "a comfortable environment for learning React, and is the best way to start building a new single-page application in React." You can read more about it at https://reactjs.org/docs/create-a-new-react-app.html. To create your app you simply type the following at the command line:

npx create-react-app my-app

After that, React sets up a full development environment with css files you can edit to style your code.

If you want to continue using create-react-app (sometimes called CRA) and use scss then you can install the Dart Sass library by typing:

npm i sass --save-dev

(Keep in mind that node-sass in deprecated and we are using Dart Sass instead of it)
For a full explanation about how to use node-sass and CRA together see "How to Use SASS in Create React App?": https://www.robinwieruch.de/create-react-app-with-sass-support

Once you move beyond CRA you can tinker with your own webpack.config.js which can also be set up to compile and import SCSS files. But if you are just starting out with React then you may want to leave tinkering with your webpack.config.js for later and stick with CRA.

Anderson

why would you want to setup webpack and babel yourself? That seems like an arduous process. What kind of configuration advantages do you get from doing things manually? Just give me an example....if you can. – Turbellarian

is it better to add it as dev dependency ? – Erythrocyte

@JoMomma two reasons I think. First is knowledge, it's a great way to learn more about how a React dev environment works and second is control. I'm just learning React and found the hour I spent learning how to do it was VERY useful – Pink

Answer 2

If using create-react-app then:

1)First install sass dependency using npm:

npm install sass --save-dev

2)Import your sass file to your componentName.js file

import '../scss/FileName.scss';

Millda

Small addendum, if you want to use CSS modules with Sass in CRA, you need to name your files [name].module.scss for it to be picked up automatically. – Stumpf

Answer 3

If you are using create-react-app, just add sass as a dev dependency.

yarn add -D sass or npm install --save-dev sass

Then just replace/rename all CSS files and corresponding imports to *.scss instead of *.css

Vertebra

Answer 4

first, install sass in your project. Then import it into your component.

install sass:

1. Using npm: npm install sass
2. Using yarn yarn add sass

import in your component: import example from './example.scss'

Guernica

Answer 5

Node-sass is deprecated, use sass.

install sass:

Using npm: npm install sass --save-dev

Using yarn: yarn add sass

import in your component: import example from './example.scss'

if you are in starting your new project and want control over webpack config, try to use react-app-rewired or craco, they offer you control over webpack config, by which you can add any loader into your config.

if CRA suffices your need then no need to complicate things above-mentioned packages.

Thanks

Palmerpalmerston

Answer 6

The steps to add Sass to Create React App are:

1. Install node-sass:

   npm install node-sass

   or

   yarn add node-sass

Since node-sass has deprecated therefore you can use the following steps to install sass :-

   npm install sass --save-dev

   **or**

   yarn add sass

2. Convert your .css files to .scss
3. Import your .scss files in your React components like App.js

Tacy

node-sass has been deprecated, install sass instead (npm install sass) – Arrowy

Your answer is just a spam of other previous answers. – Salzman

Answer 7

npm install sass

create theme/assets folder inside src. add variable mixins file with underscore. incude scss file in component scss file.

@import './Assets/mixins';

Here is an link to sample react project with scss

Centonze

This is an incorrect answer. node-sass has been DEPRECATED. Besides, your answer does not provide anything new to previous answers. Do you not have time to read them ? – Salzman