Sass

Next.js bietet integrierte Unterstützung für die Integration von Sass nach der Paketinstallation mit den Erweiterungen .scss und .sass. Sie können komponentenbezogenes Sass über CSS-Module mit den Erweiterungen .module.scss oder .module.sass verwenden.

Installieren Sie zunächst sass:

npm install --save-dev sass

Hinweis:

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

Wenn Sie sich nicht sicher sind, beginnen Sie mit der .scss-Erweiterung, die eine Obermenge von CSS ist und keine Kenntnisse der Indented Syntax ("Sass") erfordert.

Sass-Optionen anpassen

Wenn Sie Ihre Sass-Optionen konfigurieren möchten, verwenden Sie sassOptions in next.config.

import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  sassOptions: {
    additionalData: `$var: red;`,
  },
}
 
export default nextConfig

/** @type {import('next').NextConfig} */
 
const nextConfig = {
  sassOptions: {
    additionalData: `$var: red;`,
  },
}
 
module.exports = nextConfig

Implementierung

Sie können die Eigenschaft implementation verwenden, um die zu verwendende Sass-Implementierung anzugeben. Standardmäßig verwendet Next.js das Paket sass.

import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  sassOptions: {
    implementation: 'sass-embedded',
  },
}
 
export default nextConfig

/** @type {import('next').NextConfig} */
 
const nextConfig = {
  sassOptions: {
    implementation: 'sass-embedded',
  },
}
 
module.exports = nextConfig

Sass-Variablen

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

Beispielsweise die exportierte primaryColor Sass-Variable:

$primary-color: #64ff00;
 
:export {
  primaryColor: $primary-color;
}

// wird zur Root-URL `/` gemappt
 
import variables from './variables.module.scss'
 
export default function Page() {
  return <h1 style={{ color: variables.primaryColor }}>Hello, Next.js!</h1>
}