In this article, we will learn how to style with sass/scss in react
With the node-sass package, we can use SASS in React. Using node-sass, we can simply create sass files and utilize them in our React application as regular CSS files, and node-sass will handle sass file compilation for us.
-First, we will create React project:
npx create-react-app foldername
-Then install sass module package using npm i node-sass.
npm install node-sass
-Now create a sass file using the .scss extension (App.scss).
.container {
background: black;
text-align: center;
h1 {
color: white;
padding: 11px;
}
}
-Import scss file in app.js file
import './App.scss';
function App() {
return (
<>
<div className="container">
<h1>Hey, This is a Sass Demo</h1>
</div>
</>
);
}
export default App;
output:
