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

​
Installation

npm install --save-dev sass

​
Usage with CSS Modules

Use Sass with CSS Modules by creating a file with the .module.scss or .module.sass extension: 
$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: 
$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: 
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.

Build docs developers (and LLMs) love

Get started for freeTalk to us