Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

How to install node-sass to React project?

  • Last Updated : 05 Oct, 2021

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:

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :