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:
Step 3: Install required modules using the following command:
npm install node-sass
Step 4: Create a sass file as shown below:
Example:
Javascript
//App.js 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; |
CSS
//app.scss .gfg { background-color : green ; padding : 5px ; padding-left : 15px ; h 1 { color : white ; font-family : sans-serif ; } } |
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:
How to style with SASS/SCSS in React ?
Styling in React is very important for creating better user interfaces. using SASS/SCSS in React, which offers many features over traditional CSS, you can write more maintainable and structured stylesheets.