How to import SASS in Next.js ?

Sass is the short form of Syntactically Awesome Style Sheet. It is an upgrade to Cascading Style Sheets (CSS). Sass is a CSS pre-processor. It is fully compatible with every version of CSS. Sass reduces the repetition of CSS and therefore saves time. Next.js is based on react, webpack, and babel. It is an awesome tool for creating web applications and is famous for server-side rendering.

In this article, we will discuss the way to import the Sass in the Next.js Application. Below is the step-by-step implementation.

Step 1: Create the Next.js application using the following command:

npx create-next-app project_test

• project_test: Our Next.js Application Name.

Project Structure: The following packages and dependencies will be installed automatically.

Next.js Application Directory Structure.

Step to run the application: To run the Next.js Application use the following command:

npm run dev

Now our task is to import the Sass inside our Application. Use the following steps to import Sass inside our application.

Step 1: Install the Sass Package inside the Application using the following command:

npm i sass
npm add sass 

As you can see inside the styles directory Home.module.css file is there. We will use this file only and import Sass.

Step 2: Add global sass styles:

• Go to the 'styles' directory and select the 'globals.css' file and change the extension to either '.sass' or '.scss'.

globals.scss

• Update the following line inside the pages->app.js file:

import styles from '../styles/globals.scss'

Step 3: Now we will test our sass installation. To do this update your index.js file with the following code.

index.js

Javascript

export default function Home() {
    return (
        <>
            <h1 class="title">GeeksforGeeks</h1>
            <h3>Import Sass in Next.js</h3>
        </>
    )
}

Step 4: We will target <h1> element for changing the text color using the sass styling. our globals.scss file will look like this.

globals.scss:

CSS

$text_color: green;
.title{
    color: $text_color;
}

Output: