DEV Community 👩‍💻👨‍💻

Cover image for How to use Sass in a React project
David Alejandro Quiñonez
David Alejandro Quiñonez

Posted on

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;
}
Enter fullscreen mode Exit fullscreen mode

Import as stylesheet

import "styles.scss"

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

export default App;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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

Top comments (6)

Collapse
 
ahmedelamine profile image
ahmedelamine

node-sass is deprecated, use
npm i sass

Collapse
 
dalejan profile image
David Alejandro Quiñonez Author

Thanks for sharing!!

Collapse
 
athimannil profile image
Muhammed Athimannil

Thanks for the info

Collapse
 
stef4nutz profile image
stephen

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

Collapse
 
dalejan profile image
David Alejandro Quiñonez Author

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

Collapse
 
mrezah1 profile image
MrezaH

Thsnks bro😍👌

🌚 Life is too short to browse without dark mode