Sass

Next.js bietet integrierte Unterstützung für die Integration mit Sass, nachdem das Paket installiert wurde, und zwar sowohl für die Dateiendungen .scss als auch .sass. Sie können komponentenspezifisches Sass über CSS Modules und die Dateiendungen .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>
  )
}