Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/vercel/next.js/llms.txt

Use this file to discover all available pages before exploring further.

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.