How to style with SASS/SCSS in React ?

Styling in React is very important for creating better user interfaces. using SASS/SCSS in React, which offers many features over traditional CSS, you can write more maintainable and structured stylesheets.

Prerequisite:

• Introduction to SASS
• Knowledge of React
• Node and NPM/Yarn installed

Setting up environment and execution:

Step 1: Create React App command

npx create-react-app foldername

Step 2: After creating your project folder, i.e., folder name, move to it using the following command:

cd foldername

Project Structure:

Step 3: Install required modules using the following command:

npm install node-sass

Step 4: Create a sass file as shown below:

Example:

Javascript

//App.js

import React, { Component } from 'react';

import './App.scss';

class App extends Component {

    render() {
        return (
            <div className="gfg">
                <h1>Geeks for Geeks</h1>
            </div>
        );
    }

}

export default App;

CSS

//app.scss

.gfg {
    background-color: green;
    padding: 5px;
    padding-left: 15px;

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

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Note: If there is a compiling issue downgrade node-sass as follows:

npm install node-sass@4.14.1

Output: Now open your browser and go to http://localhost:3000/, you will see the following output: