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

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

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