Sass

Sass

Run npm 2,036 install --save-dev sass@1.104.1 and Next.js 10,514 picks the compiler up; there is nothing to register. Both syntaxes work — .scss, a superset of CSS, and the indented .sass — and both combine with CSS Modules through .module.scss and .module.sass, scoped exactly as in CSS Modules.

app/panel/panel.module.scss and the CSS it compiles toSass

$radius: 8px;
.panel {
  border: 1px solid #b0bec5;
  border-radius: $radius;
  h2 { margin: 0 0 8px; }
  &:hover { border-color: #1565c0; }
}

Output

.panel-module-scss-module__QL2qzW__panel{border:1px solid #b0bec5;border-radius:8px}
.panel-module-scss-module__QL2qzW__panel h2{margin:0 0 8px}

Compiler options go in next.config.ts under sassOptions, passed straight to the Sass 22,539 API. additionalData: '@use "@/styles/_tokens.scss" as *;' prepends a string to every file, making a variables partial available everywhere; implementation: "sass-embedded" swaps in the faster native compiler.

The honest question is whether you need Sass at all. Nesting, color-mix() and custom properties are native now, and custom properties beat Sass variables for anything that changes at runtime. Sass still earns its place for @use-based file organization, loops that generate a spacing scale, and multi-declaration mixins.

MENU