How to install node-sass to React project?

Sass is a scripting language that is compiled into Cascading Style Sheets (CSS). It is a kind of preprocessor language. It was initially designed by Hampton Catlin and then it was developed by Natalie Weizenbaum. After its initial versions, Weizenbaum and Chris Eppstein have continued to extend SASS with SassScript. It supports four data types, and they are Numbers, Strings, Colors, and booleans. Nesting also works in this language.

Prerequisite:

• Basic knowledge of ReactJS
   

Installation process:

• Adding sass using npm:

  npm install node-sass --save

• Adding sass using yarn:

  yarn add node-sass

Note: Now you can rename App.css to App.scss and update App.js to import App.scss. This file and any other file will be automatically compiled if imported with the extension .scss or .sass.
 

Example: Once you follow the above steps then it means that you had successfully installed sass and you can start using it.

• App.sass: As you can observe in the code of sass file, we can use variables and also perform arithmetic operations in sass files. This is the advantage of using sass.

  HTML

  
  

  
  
  

  $bg:rgb(88, 235, 88); $border-color : black;         .main-block{      background-color: $bg;   height: 4px / 100px  * 100% ;   border: 1px solid $border-color;   text-align: center;    }

• App.js

  Javascript

  
  

  
  
  

  import logo from './logo.svg'; import './App.scss';    function App() {   return (     <div className="App">       <header className="App-header">         <img src={logo} className="App-logo" alt="logo" />            <p>           Edit <code>src/App.js</code> and save to reload.         </p>            <a           className="App-link"           href="https://reactjs.org"           target="_blank"           rel="noopener noreferrer"         >           Learn React         </a>       </header>     </div>   ); }    export default App;

• Output: