How to style with SASS/SCSS in React ?
Last Updated :
06 Dec, 2023
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.
Prerequisite:
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
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:
Share your thoughts in the comments
Please Login to comment...