Sass

Next.js bietet integrierte Unterstützung für Sass mit den Dateiendungen .scss und .sass. Sie können komponentenbezogenes Sass über CSS-Module und die Endungen .module.scss oder .module.sass verwenden.

Installieren Sie zunächst sass:

npm install --save-dev sass

Wissenswert:

Sass unterstützt zwei verschiedene Syntaxen, jede mit ihrer eigenen Dateiendung. Die .scss-Endung erfordert die Verwendung der SCSS-Syntax, während die .sass-Endung die Verwendung der Einrückungssyntax ("Sass") erfordert.

Wenn Sie unsicher sind, welche Sie wählen sollen, beginnen Sie mit der .scss-Endung, die eine Obermenge von CSS ist und nicht das Erlernen der Einrückungssyntax ("Sass") erfordert.

Anpassen der Sass-Optionen

Wenn Sie den Sass-Compiler konfigurieren möchten, verwenden Sie sassOptions in next.config.js.

const path = require('path')

module.exports = {
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },
}

Sass-Variablen

Next.js unterstützt Sass-Variablen, die aus CSS-Modul-Dateien exportiert werden.

Beispielsweise die Verwendung der exportierten primaryColor Sass-Variable:

$primary-color: #64ff00;

:export {
  primaryColor: $primary-color;
}

// wird der Root-URL `/` zugeordnet

import variables from './variables.module.scss'

export default function Page() {
  return <h1 style={{ color: variables.primaryColor }}>Hallo, Next.js!</h1>
}