How to Use Sass or SCSS in a Next.js App

Developers are constantly looking for the best technologies to build web applications. After the entry of the React.js library, it’s easier to design beautiful user interfaces. When coming to production-ready web applications, Next.js a framework of React library is awesome. Developers are also in love with Sass or SCSS instead of CSS. Here we will discuss the ways to use Sass or SCSS in a Next.js app.

Note that, we are using the SCSS syntax of Sass in this article.

Prerequisites

You need basic knowledge in HTML, CSS, Sass, and Next.js to follow this article.

What we will learn

Here we will learn

• What is Sass or Scss
• Create a Next.js app
• Install sass package
• Using the SCSS in our Next.js app

In the end, the app we are going to build will look the same as below.

Video tutorial

If you would like to follow a video guide, the below youtube link will help you to cover up the entire steps in less than 2 minutes.

Note that the video is strictly based on this article.

What is Sass or Scss

Sass (Syntactically awesome style sheets) is a preprocessor scripting language. It interprets or compiles the syntax to the normal CSS.

It uses 2 syntaxes.

1. Original syntax called Indented syntax – uses a syntax similar to Haml
2. The newer syntax, SCSS (Sassy CSS) – uses block formatting like that of CSS.

Here we are going to work with the new syntax (Sassy CSS).

The sass pre preprocessor package we use will compile this syntax to normal CSS.

Note: Don’s confuse Sass and SCSS. Sass is a preprocessor and SCSS is the newer syntax of Sass.

Create a Next.js App

First, we need to create a Next.js application using the NPX tool. Don’t worry about NPX, because it’s a tool coming with NPM(Node Package Manager) 5.2+ onwards.

So, after a successful installation of Node.js, create a Next.js application using NPX.

npx create-next-app next-scss-example

This command will create a react application with the project name next-scss-example.

Now enter the project directory and start the app.

cd next-scss-example
npm run dev

It will open up the Next application we have created in our browser window with the address https://localhost:3000.

If you need further assistance in this step, I wrote an article to install and set up a Next.js app on Windows 10.

We can open up the project with Visual Studio Code or any other code editor.

Install Sass package

Now we need to install the sass package using NPM. This will interpret or compile the SCSS syntax to normal CSS.

Sass can be installed inside our app or globally. But here we are installing it inside our app.

The below command will take care of it.

npm i sass

Using the SCSS in our Next.js app

In Next.js we can add style as,

• Global stylesheet
• Component-level stylesheets

Global stylesheets are imported in the pages/_app.js file which will affect the entire app.

Component-level styles are imported in each component. The naming structure will be like ComponentName.module.scss.

Now, let’s re-design the home page in Next.js and add some SCSS styles to it.

As the first step, we can change the index.js file inside the pages directory, which changes the homepage UI of our app.

Here, we are creating 3 cards with titles and descriptions. We will also import a stylesheet Home.module.scss from the styles directory.

// Pages/index.js

import styles from '../styles/Home.module.scss'

export default function Home() {
  return (
    <div className ={styles.cardContainer}>
    <div className={styles.card}>
      <div className ={styles.title}>
      Card 1
      </div>
      <div className ={styles.description}>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </div>
    </div>

    <div className={styles.card}>
      <div className ={styles.title}>
     Card 2
      </div>
      <div className ={styles.description}>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </div>
    </div>

    <div className={styles.card}>
      <div className ={styles.title}>
      Card 3
      </div>
      <div className ={styles.description}>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </div>
    </div>
    </div>
  )
}

So that the app will look the same as below.

Now let us code the Home.module.scss file inside styles directory.

// styles/Home.module.scss

.cardContainer {
  display: flex;
.card {
  margin-left: 1rem;
  margin-right: 1rem;
  box-shadow: 5px 5px 20px rgb(0 0 0 / 10%);
  padding: 1rem;
  width: 100%;
  height: auto;
  .title {
    font-size: 2em;
    margin-bottom: 1rem;
  }
  .description {
    font-size: 1em;
  }
  &:hover {
    background: rgb(235, 235, 235);
    cursor: pointer;
  }
}
}

So that our app will become more stylish as below.

Now let’s add some global styles. This is defined inside global.scss file inside styles directory.

// styles/global.scss

body {
  margin-top: 40vh;
}

The above style will add a margin to all the pages of our app. So the cards will become vertically centered.

We also need to import this global SCSS style in the _app.js file.

// pages/_app.js

import "../styles/globals.scss";

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

If everything goes well, the home page of our Next.js app will be as below.

Codesandbox

Refer to the CodeSandbox link to view the live app. You can clone this project to your CodeSandbox account and edit the code also.

https://codesandbox.io/s/interesting-gates-ue7iw

GitHub

You can always refer to the GitHub repository to clone this project, refer to the code and work on top of it.

https://github.com/syamjayaraj/next-scss-example

Summary

Here we created a simple Next.js app and installed the Sass library to compile the SCSS syntax. Then we changed the Home page UI and added an SCSS file to style the Page. We also added a global style that affects the entire app.