Next.js frameworks are used with CSS styles .

SASS and SCSS are advanced CSS with more language features like variables and mixins. It is a preprocessor useful for developers for clean CSS code and provides reusable maintenance.

SASS language comes with two syntax

  • SASS: it is indented syntax without braces
  • SCSS: SASSY Syntax with braces and nested blocks

In this tutorial, You are going to learn how to integrate SCSS syntax and files into the Next.jS app

  • Create a Next.js application from scratch onwards
  • Add SASS npm library dependency
  • Integration of sass into the NextJS app
  • Add Global SCSS styles in the application
  • Component scoped CSS modules in Application
  • Variables and mixins usage in the Next.js application

Create Next.js projects using create-next-app CLI

First, Create a Next.js application npx create-next-app CLI command

A:\work\nextjs>npx create-next-app nextjs-sass-app
Creating a new Next.js app in A:\work\nextjs\nextjs-sass-app.

Using npm.

Installing dependencies:
- react
- react-dom
- next


added 16 packages, and audited 17 packages in 15s

2 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Installing devDependencies:
- eslint
- eslint-config-next


added 203 packages, and audited 220 packages in the 40s

63 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Initialized a git repository.

Success! Created nextjs-sass-app at A:\work\nextjs\nextjs-sass-app
Inside that directory, you can run several commands:

  npm run dev
    Starts the development server.

  npm run build
    Builds the app for production.

  npm start
    Runs the built app in production mode.

We suggest that you begin by typing:

  cd nextjs-sass-app
  npm run dev

Next, run the application with the below command

npm run dev

It starts the server and the application is accessible at the URL http://localhost:3000

Install SASS dependency

sass is an npm library used to compile the SCSS or SASS code into CSS. First, Go to the application folder, and install using the npm install sass command.

A:\work\nextjs\nextjs-sass-app>npm install sass

added 9 packages, and audited 229 packages in 2s

64 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

It installs the sass and its dependencies into the application

Add SASS or SCSS files to the NextJS application

SASS or SCSS is a language used to write a CSS with extended language syntax.

You can add sass code in the NextJS application in two ways

  • Global SASS styles
  • Component SASS scoped styles

By default, the create-next-app CLI supports and creates CSS file extensions for styling components.

So you have to rename the extension from CSS to scss.

Once sass is installed, you need to import sass/scss files globally or component level.

We have a home page component that uses an index.tsx file.

Let’s add scss styles to the home page with the global or component level.

How to add global sass styles in the NextJS application?

Global styles are applied to all the pages, and components in the entire application. Usually, It contains a layout and template, and header and footer styles are added to global styles.

Let’s rename globals.css to globals.scss in the public folder.

NextJS app gives an error Module not found: Can’t resolve ‘../styles/globals.css’

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
error - ./pages/_app.js:1:0
Module not found: Can't resolve '../styles/globals.css'
> 1 | import '../styles/globals.css'
  2 |
  3 | function MyApp({ Component, pageProps }) {
  4 |   return <Component {...pageProps} />

https://nextjs.org/docs/messages/module-not-found

To fix this issue, Update _app.js file to import scss file instead of CSS.

Next, Change the import statement inpages/_app.js from:

import '../styles/globals.css'

to:

import '../styles/globals.scss'

Add the below sass styles to globals.scss

html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

a {
    color: red;
    &:visited {
      color: red;
    }
    &:hover {
      color: green;
    }
    &:active {
      color: yello;
    }
}

The sass styles contain anchor styles for active, hover, and visited CSS styles.

These styles are applied to anchor links in all pages and components in the Next.js application.

Let’s see the home page component code. index.tsx:

export default function Home() {
  return (
    <div className={styles.container}>
      <h1>Welcome to Next.js SASS  example
      </h1>
      <ul>
        <li><a href="#">Link1</a></li>
        <li><a href="#">Link2</a></li>
        <li><a href="#">Link3</a></li>
      </ul>
    </div>
  )
}

You can see styles applied on the page below:

Global sass styles nextjs application

How to add Component scoped sass/scss styles in nextjs

Component scoped styles are added with sass or scss code in every react component.

The file name should end with .module.scss or .module.sass Consider the index.js component in the pages folder.

Here, is Imported Home.module.scss into component Added a button and added styles with className with javascript expression{}

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

export default function Home() {
  return (
    <div className={styles.container}>
      <h1>Welcome to Next.js SASS  example
      </h1>
      <ul>
        <li><a href="#">Link1</a></li>
        <li><a href="#">Link2</a></li>
        <li><a href="#">Link3</a></li>
      </ul>
      <button className={styles.button}>Go to Page</button>
    </div>
  )
}

Create a sass file for a home page component - Home.module.scss

In this styles component, Added button styles with changing background on hover a button.

.button{
  color:white;
  border-radius: 20px;
  outline:none;
  border: none;
  background-color:#0070f3 ;
  height: 35px;
  &:hover{
    background-color: red;
    cursor: pointer;
  }

}

These styles are scoped to the same component and help to avoid conflicts with styles as well as naming CSS selector names

Add scss variables and mixins to the NextJS app

In this, use sass features such as variables and mixins in the Next.js application.

Let’s rewrite the above styles using variables and mixins . variables are declared once and used in many places.

Mixins are similar to functions, used to group multiple CSS styles into code blocks with a name. It supports declaring it in one place and reusing it in many places or files.

Let’s add two files to the styles folder

  • _variables. scss: It contains all the variables required for the sass code base
  • _mixins.scss: Mixins contains reusable CSS code

The files underscore(_) tells that it is a partial, not complete page.

_variables.scss: Declared variables for colors and font family.

$primary-color:blue;
$secondary-color:green;
$neutral-color:red;
$font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;

_mixinx.scss:

Declared mixin achorStyles that contains CSS code for anchor styles logic .

@use "variables" as variable;

@mixin anchorStyles(){
        color: variable.$primary-color;
        &:visited {
          color: variable.$secondary-color;
        }
        &:hover {
          color: variable.$neutral-color;
        }
        &:active {
          color: variable.$neutral-color;
        }

}

Let’s use mixins and variables in globals.scss

  • import variables and mixins file using the @use sass rule. You can also use the @import rule, and @use rule to allow the namespace and avoid conflict issues.
  • For variables, created a namespace as a variable using the @use "variables" as a variable; statement. @import is deprecated in Sass language soon.
  • You can use the variables with the namespace.variable syntax in scss code, For example, variable.$font-family replaces the font-family value during the compilation phase.
  • In the same way, Mixins are referred to using @include mixin.anchorStyles
@use "variables" as variable;
@use "mixins" as mixin;
html,
body {
  padding: 0;
  margin: 0;
  font-family: variable.$font-family;
}

a {
  @include anchorStyles;
}