How do you add SCSS to your React Project?
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
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
(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.
If using create-react-app then:
1)First install sass dependency using npm:
npm install sass
2)Import your sass file to your componentName.js file
The steps to add Sass to Create React App are:
npm install node-sass
yarn add node-sass
Convert your .css files to .scss
Import your .scss files in your React components like App.js
first, install sass in your project. Then import it into your component.
npm install sass
yarn add sass
import in your component:
import example from './example.scss'