Verwendung von Sass in Next.js

Next.js bietet integrierte Unterstützung für die Verwendung von Sass, nachdem das Paket installiert wurde, und zwar mit den Dateiendungen .scss und .sass. Sie können komponentenbezogenes Sass über CSS-Module und die Erweiterungen .module.scss oder .module.sass nutzen.

Installieren Sie zunächst sass:

npm install --save-dev sass

Wissenswert:

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

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

Anpassen der Sass-Optionen

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

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

Sass-Variablen

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

Beispielsweise die Verwendung der exportierten Sass-Variable primaryColor:

$primary-color: #64ff00;

:export {
  primaryColor: $primary-color;
}

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

export default function MyApp({ Component, pageProps }) {
  return (
    <Layout color={variables.primaryColor}>
      <Component {...pageProps} />
    </Layout>
  )
}