Skip to content
Related Articles

Related Articles

How to style with SASS/SCSS in React ?
  • Difficulty Level : Medium
  • Last Updated : 16 Feb, 2021

Introduction: We can use SASS in React using a package called node-sass. Using node-sass we can just create sass files and use them as the normal CSS files in our React application and node-sass will take care of compiling sass files.

Prerequisite: Introduction to SASS

Modules: To compile sass code, node-sass can be used.

Setting up environment and execution:

Step 1: Create React App command



npx create-react-app foldername

Step 2: After creating your project folder, i.e., folder name, move to it using the following command:

cd foldername

Project Structure: It will look like the following.

Step 3: Install required modules using the following command:

npm install node-sass

Step 4: Create a sass file as shown below:

Step 5: Following will be the code in sass syntax.



Filename- App.scss:

CSS




.gfg {
  background-color: green;
  padding: 5px;
  padding-left: 15px;
  
  h1 {
    color: white;
    font-family: sans-serif;
  }
}

Step 6: Following will be the code in the App.js file.

Filename: App.js

Javascript




import React, { Component }  from 'react';
  
import './App.scss';
  
class App extends Component {
  
  render() {
    return (
      <div className="gfg">
        <h1>Geeks for Geeks</h1>
      </div>
    );
  }
    
}
  
export default App;

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Note: If there is a compiling issue downgrade node-sass as follows:

npm install node-sass@4.14.1

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

My Personal Notes arrow_drop_up
Recommended Articles
Page :