How to Implement SASS to React 18 Applications

Last Updated on by in React JS

In this article, we will show you how to set up the SASS in React js application. We will use the node-sass module to work with SASS in React js environment.

Node-sass is a profound module that provides binding for Node.js to LibSass, the C version of the popular stylesheet preprocessor, Sass.

It lets you react to compile .scss files to CSS at amazingly fast speed natively and automatically through a connect middleware.

SASS offers handy and easy methods to style modern web applications. SASS opens the doorway to easiness and allows us to write more maintainable and modular CSS code.

If you are new to React and facing problems in adding SASS in React, it might be a bit tricky for you.

Therefore, we are going to show you how to configure SASS in React without any hassle.

React Js Add SASS / SCSS using Node SASS Module Example

  • Step 1: Create React App
  • Step 2: Install Node SASS Package
  • Step 3: Write SASS in CSS File
  • Step 4: Create Component File
  • Step 5: Update App Js File
  • Step 6: View App in Browser

Create React App

In order to get started with React, you have to install the create react app tool in your system.

npm install create-react-app --global

Run the following command from the terminal to install a new React app:

npx create-react-app react-demo

Next, step into the project folder.

cd react-demo

Install Node SASS Package

To integrate SASS in React, you require to add the node-sass module in React application using the node package manager.

npm install node-sass --legacy-peer-deps

Write SASS in CSS File

Look for the App.css and index.css files inside the src folder, change bot files .css extension to .scss extension.

You have to place the given styling code into the App.scss file:

body {
  background-color: #e6e6e6;
  .scssClass {
    background-color: rgb(55, 18, 243);
    text-align: center;
    padding: 20px 0;

    h2 {
      color: white;
      font-family: sans-serif;
    }
  }
}

Create Component File

In this step, we will create the components folder, create a file named Home.js in the components directory.

Add the scssClass class to the div so that we can add the SASS styling to the React component.

import React from 'react'

function Home() {
  return (
    <div className="scssClass">
      <h2>React Js SASS / SCSS Example</h2>
    </div>
  )
}

export default Home

Update App Js File

In order to see the changes of SASS in React component we have to register the React component inside the main React component.

Open the App.js file and place the given code into the file.

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

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

export default App

View App in Browser

In the last step, open the terminal, type the command and then press enter:

npm start

After running the command, react server is running, open the given url on the browser to test the app:

http://localhost:3000

How to Implement SASS to React Js Applications

Conclusion

In this simple tutorial, we have learned how to set up the sass in React js application.

To implement the SCSS or SASS in React, we took the help of the Node Sass module.

We hope this guide will help you in your development journey and will increase your knowledge of React development.