How to import SASS in Next.js ?

Last Updated : 22 Jul, 2024

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. Importing SASS in Next.js allows you to use SCSS for styling your application. This integration enables advanced styling features and maintains consistency across your project.

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

Approach

To import SASS in the next.js we will first install sass from the node package manager with npm command. After installation add .scss to the global styling file. Now to use sass in the application import use import './styles.module.scss'; in the JSX file.

Steps to Implement SASS in Next.js App

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.

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

Step 2: 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 3: 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 4: Now we will test our sass installation. To do this update your index.js file with the following code.

JavaScript

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

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

CSS

/* globals.scss */ $text_color: green; .title{ color: $text_color; }

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