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 using 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

At the end, the app we are going to build will looks the same as below.

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 pages/_app.js file which will effect for the entire app.

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

Now lets re-design the home page in Next.js and add some SCSS styles in it.

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

Here, we are creating 3 cards with title and description. We will also import a stylesheet Home.module.scss from 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 app will looks 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 the our app will become more stylish as below.

Now lets 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.

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 simple Next.js app and installed the Sass library to compile the SCSS syntax. Then we changed the Home page UI and added added an SCSS file to style the Page. We also added a global style that effects the entire app.

One thought on “How to Use Sass or SCSS in a Next.js App

  1. So what’s the point to use scss module if we are forced to use it like a regular css module for nested classes ?

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.