What is Sass and How to use in React ?

What is Sass ?

Sass is preprocessor of css it means Sass files are executed on the server then css send back to browser

in React with create-react-app we can easily install Sass

use the terminal command to install Sass

npm install node-sass

Now just create .scss extension type file and add the given below style

sass.scss

$Color: red;

h1 {
  color: $Color;
}

Now import .scss file into index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './sass.scss';

class Sass extends React.Component {
  render() {
    return (
      <div>
      <h1>Hello sass</h1>
      </div>
    );
   
}}

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


Leave a Comment