How to Set Up SASS in React with Node Sass Library

In this step-by-step guide, we will cover how to set up SASS in React js application using the node-sass package.

The Node-sass is a useful module which offers to bind Node.js to LibSass. It allows node-based apps to compile SCSS files to CSS natively.

This react sass configuration tutorial will show you how to add sass in react and how to easily use sass in react.

Ideally, we all are aware of CSS; it is basically a style language which we use to style and create web pages. In comparison, SCSS is a special type of file for SASS. It is generally used in Ruby language, which constructs the browser’s CSS style sheets.

React Configure SASS / SCSS using Node SASS Library Example

  • Step 1: Set Up React Project
  • Step 2: Add Node SASS Module
  • Step 3: Define SASS CSS
  • Step 4: Make New Component
  • Step 5: Register Component in App Js
  • Step 6: Start React Project

Set Up React Project

To install a new React project on your system, we have to run the given command from the terminal.

npx create-react-app react-blog

React project is ready, now enter into the project folder.

cd react-blog

Add Node SASS Module

We need to install the node-sass library, we can do it by running the suggested command.

npm install node-sass

Define SASS CSS

We have by default App.css and index.css files located in our React project. Our primary task is to change the files extension from .css to .scss.

After changing the file extension, make sure to place the provided code within the App.scss file.

body {
  background: black;
  .sassWrapper {
    background-color: red;
    padding: 22px 10px;

    h2 {
      color: #ffffff;
    }
  }
}

Make New Component

We need to make the new component so that we can show you how the sass is working in react app.

Therefore, make the components directory, next make a new file and name it User.js.

import React from 'react'

function User() {
  return (
    <div className="sassWrapper">
      <h2>React Js SCSS Example</h2>
    </div>
  )
}

export default User

Register Component in App Js

Previously, we created a new component, react app serves through App component that is the primary component.

Hence we have to add the new component in the App.js file.

import './App.scss'
import User from './components/User'

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

export default App

Start React Project

We have successfully configured SASS in React app, its now time for starting the react server.

Head over to terminal and execute the provided command and run the app.

npm start

We can now invoke the following url to test the app.

http://localhost:3000

How to Set Up SASS in React with Node Sass Library

Summary

The best thing about SASS is that it is based on a real programming language.

That means if you are a little bit aware of the fundamentals of programming language such as. Variables, arrays, and control structures then it is super easy to learn and use in React or in any other framework.

In this guide, we helped you learn how to add or set up the sass in a React-based app using the node-sass module.