Using SASS in React JS Application

In this tutorial, we will go through easy steps to start using SASS instead of traditional CSS in React JS application.

Syntactically Awesome Style or SASS is the CSS with superpowers. SASS provides a wide variety of easy methods and techniques to develop modern-era web applications. It helps in robust and powerful management of CSS code which proves more efficient and easy to maintain.

When doing development in React, we sometimes find it difficult to use SASS instead of CSS or it may sound like a cumbersome job to switch. Leave all that hassle to use, in this guide you will learn how to easily configure your React app to easily adapt to use SASS in a few steps.

Node SASS is a powerful package that undercovers the C-based tool called LibSASS that will help for easy integration of react app to use SASS preprocessors and its features.

How to use SASS style in React app?

Step 1 – Create React App

Step 2 – Install Node SASS Library

Step 3 – Rename Files and Add SASS Style

Step 4 – Update CSS with SASS paths

Step 5 – See In Action

Create React App

Before we create React app, make sure you have installed the create-rest-app tool to start:

npm install create-react-app --global

Thereafter you are ready to create new react app:

npx create-react-app react-sass-app

Move inside the react app folder:

cd react-sass-app

Install Node SASS Library

To enable SASS processing in react app, we will install the node-sass package library. Move to the terminal and execute the following command:

npm install node-sass

Rename Files and Add SASS Style

Now we will rename all the CSS files to SCSS. For example, we have index.css and App.css file by default. Rename these files to index.scss and App.scss.

Now open the App.scss file and update it with the following sample SCSS style code:

.wrap {
  margin: 15px;
  h1 {
    color: brown;
    font-style: italic;
  }
  div {
    padding: 15px;
    background-color: aquamarine;
    .my-style {
      color: red;
      font-weight: bold;
    }
    .sub-heading {
      color: blue;
    }
    ul {
      padding: 5px;
      background: gray;
      li {
        color: white;
        margin-left: 25px;
      }
    }
  }
}

Update CSS with SASS paths

With this change done, also update the import paths accordingly. Open the index.js file and update the import paths from “./index.css” to “./index.scss”

Similarly, open the App.js file and update the import path from “./App.css” to “./App.scss“;

You need to perform similar renaming of files and import charges everywhere in your application structure.

import React from "react";
import "./App.scss";
function App() {
  return (
    <div className="wrap">
      <h1>SCSS integration in React app</h1>
      <div>
        My Sample text with scss styling in{" "}
        <span className="my-style">Freaky Jolly.com</span>
        <h2 className="sub-heading">Features of SCSS</h2>
        <ul>
          <li>Less amount of lines</li>
          <li>More stable and powerful</li>
          <li>Support for variables, nested rules, mixins etc</li>
        </ul>
      </div>
    </div>
  );
}
export default App;

See In Action

Finally, execute the following command to start the development webserver:

npm start

Open the application at the following URL:

http://localhost:3000/

Conclusion

We discussed how to quickly implement SCSS support in a react application. By using the node-scss plugin we can easily start using the powerful and robust SCSS-based CSS styling in our components.

Category: React