Sass Support

Next.js has built-in support for Sass, so you can write .scss and .sass files right alongside your components without configuring a build tool yourself. Under the hood, Next.js compiles Sass through webpack's Sass loader — you only need to install the sass package as a dependency, and importing a Sass file "just works", the same way importing a plain .css file does.

Install the Sass compiler

Bash

npm install --save-dev sass

Note

Notice this installs sass (the Dart Sass compiler package), not a Next.js plugin. Next.js detects the package in node_modules and automatically enables .scss/.sass imports across the app — there's no entry to add to next.config.js.

Global Sass files

Just like global CSS, a global Sass file can only be imported once, and the conventional place to do that is your root layout.

app/globals.scss

SCSS

$primary: #4f46e5;
$radius: 8px;

body {
  margin: 0;
  font-family: system-ui, sans-serif;
}

.card {
  border-radius: $radius;
  border: 1px solid darken($primary, 30%);
}

app/layout.tsx

TSX

import './globals.scss'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

A quick tour of Sass features

Sass is a superset of CSS, so any valid CSS is valid Sass. On top of that, it adds a handful of features that make stylesheets easier to maintain in larger projects.

Variables — reusable values declared with a $ prefix, e.g. $primary: #4f46e5;, resolved entirely at compile time (unlike CSS custom properties, which stay dynamic at runtime).
Nesting — write child selectors inside their parent, mirroring your HTML structure instead of repeating parent selectors.
Mixins — reusable blocks of declarations defined with @mixin and pulled in with @include, useful for repeated patterns like flex centering or media queries.
Partials & @use — split styles across files prefixed with an underscore (e.g. _buttons.scss) and pull them into a main file, keeping large stylesheets organized.

Nesting and a mixin

SCSS

@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.navbar {
  @include flex-center;
  background: #111;

  .logo {
    font-weight: bold;
  }

  a {
    color: white;

    &:hover {
      color: #4f46e5;
    }
  }
}

Combining Sass with CSS Modules

Sass composes cleanly with CSS Modules — the same local-scoping behavior you get from .module.css applies to .module.scss files. Give a file a .module.scss extension, and Next.js scopes every class name to the component that imports it, while still letting you use variables, nesting, and mixins inside.

components/Card.module.scss

SCSS

$radius: 12px;

.card {
  border-radius: $radius;
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);

  &:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
  }
}

.title {
  font-size: 1.25rem;
  font-weight: 600;
}

components/Card.tsx

TSX

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

export default function Card({ title }: { title: string }) {
  return (
    <div className={styles.card}>
      <h3 className={styles.title}>{title}</h3>
    </div>
  )
}

File pattern	Scope	Typical use
`globals.scss` (plain `.scss`)	Global — applies site-wide	Resets, base typography, CSS variables
`Component.module.scss`	Local — scoped to the importing component	Component-specific styling, avoids name collisions
`_partial.scss`	Not compiled on its own	Shared variables/mixins imported via `@use`

Tip

Prefer .module.scss for component styles by default. It gives you Sass's ergonomics (variables, nesting, mixins) plus the collision-safety of CSS Modules — the best of both without any extra tooling.

Sass support is built into Next.js — installing the sass package is the only setup step.
A global .scss file behaves like global CSS: import it once, typically in the root layout.
Sass adds variables, nesting, mixins, and partials on top of plain CSS syntax.
.module.scss files combine Sass features with the local scoping of CSS Modules.