Sass

Style your Next.js application using Sass with .scss and .sass file extensions.

Next.js has built-in support for Sass after the package is installed. You can use both .scss and .sass syntax.

Installation

npm

npm install --save-dev sass

pnpm

pnpm add -D sass

yarn

yarn add -D sass

bun

bun add -D sass

Usage with CSS Modules

Use Sass with CSS Modules by creating a file with the .module.scss or .module.sass extension:

app/blog/blog.module.scss

$padding: 24px;

.blog {
  padding: $padding;

  h1 {
    font-size: 2rem;
  }
}

Global Sass

Import global .scss or .sass files in your root layout just like global CSS:

app/globals.scss

$font-size-base: 16px;

body {
  font-size: $font-size-base;
  margin: 0;
}

Configuring Sass options

To configure the Sass compiler, use sassOptions in next.config.js. You can pass any option supported by the sass package:

next.config.ts

import type { NextConfig } from 'next'

const config: NextConfig = {
  sassOptions: {
    // Additional load paths for @use and @import
    loadPaths: ['./styles'],
    // Silence deprecation warnings
    silenceDeprecations: ['legacy-js-api'],
  },
}

export default config

Using a custom Sass implementation

You can specify an alternative implementation such as sass-embedded:

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  sassOptions: {
    implementation: 'sass-embedded',
  },
}

module.exports = nextConfig

Shared variables with CSS Modules

To share Sass variables across all CSS Module files without importing them manually, use the additionalData option:

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  sassOptions: {
    additionalData: `@use "@/styles/variables" as *;`,
  },
}

module.exports = nextConfig

Then define your shared variables:

styles/variables.scss

$primary-color: #3b82f6;
$font-size-base: 16px;

Now every CSS Module can use $primary-color and $font-size-base without an explicit @use import.

The .scss (SCSS syntax) and .sass (indented syntax) file extensions are both supported. Choose one based on your team’s preference—SCSS is more common.