How To Style With SASS/SCSS In React

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>

export default App;


Submit a Comment

Your email address will not be published. Required fields are marked *


Select Categories