How to use Sass in Next.js

Next.js has built-in support for integrating with Sass after the package is installed using both the .scss and .sass extensions. You can use component-level Sass via CSS Modules and the .module.scss or .module.sass extension.
First, install sass:
Sass supports two different syntaxes, each with their own extension. The .scss extension requires you use the SCSS syntax, while the .sass extension requires you use the Indented Syntax ("Sass").
If you're not sure which to choose, start with the .scss extension which is a superset of CSS, and doesn't require you learn the Indented Syntax ("Sass").
If you want to configure your Sass options, use sassOptions in next.config.
You can use the implementation property to specify the Sass implementation to use. By default, Next.js uses the sass package.
Next.js supports Sass variables exported from CSS Module files.
For example, using the exported primaryColor Sass variable:
Last updated April 25, 2025
Subscribe to our newsletter
Stay updated on new releases and features, guides, and case studies.