How to use Sass in a React project

Sass is a css extension that provides wonderful features such as variables, mixins, imports, and an easier way to read the stylesheets.

This is why is so popular and the js frameworks have implemented it in its project building.

To use sass in a react project you have to install the node-sass package with npm i node-sass --save. This package basically allows us to import the scss files into our jsx files.

Now having a stylesheet as follows, we can do two things:

$color:red;

.container{
  background-color:$color;
}

Import as stylesheet

import "styles.scss"

function App() {
  return (
   <div className="container">...</div>
 )
}

export default App;

Import as module
For this case, the scss file must have module in its name, like this styles.module.scss

import styles from "styles.module.scss"

function App() {
  return (
   <div className={styles.container}>...</div>
 )
}

export default App;

And that's it, you have implemented sass in your react project.

Comments

[ahmedelamine]

node-sass is deprecated, use
npm i sass

[Muhammed Athimannil]

Thanks for the info

[David Alejandro Quiñonez]

Thanks for sharing!!

[stephen]

That's a good tutorial, thanks! Makes my job easier :D

[David Alejandro Quiñonez]

Your welcome, i'm happy you found it util.

[MrezaH]

Thsnks bro😍👌