Open In App
Related Articles

How to install node-sass to React project?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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:

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:



Last Updated : 05 Oct, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads