Articles → REACT.JS → Sass In React.Js

Sass In React.Js

In this article, we will discuss Sass in react.js.

Purpose

Sass is the CSS preprocessor. It means that the sass file is processed on the server before it sends the CSS to the browser.

Example

In this example, we will create a new file style.scss inside the src folder with the following code.

$Color: red;
h1 {
	color: $Color;
}

Inside the index.js file, import the sass file.

import React, { Component } from 'react';
import ReactDOM from 'react-dom'
import './style.scss';


class FormComponent extends React.Component {    
    
    render() {
        return (
            <h1>Hi</h1>
        );
    }
}

ReactDOM.render(<FormComponent />, document.getElementById('root'));

Output

Picture shows how Sass is used in react.js

Click to Enlarge

Posted By -	Karan Gupta

Posted On -	Monday, August 23, 2021

Query/Feedback

Your Email Id		**

Subject		*

Query/Feedback	Characters remaining 250	**