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;
}

import variables from '../styles/variables.module.scss'
 
export default function MyApp({ Component, pageProps }) {
  return (
    <Layout color={variables.primaryColor}>
      <Component {...pageProps} />
    </Layout>
  )
}