Comment utiliser Sass dans Next.js

Next.js prend en charge nativement l'intégration avec Sass après l'installation du package, en utilisant les extensions .scss et .sass. Vous pouvez utiliser Sass au niveau des composants via les CSS Modules et l'extension .module.scss ou .module.sass.

D'abord, installez sass:

npm install --save-dev sass

Bon à savoir:

Sass prend en charge deux syntaxes différentes, chacune avec sa propre extension. L'extension .scss nécessite d'utiliser la syntaxe SCSS, tandis que l'extension .sass nécessite d'utiliser la syntaxe indentée ("Sass").

Si vous ne savez pas laquelle choisir, commencez par l'extension .scss qui est un sur-ensemble de CSS et ne nécessite pas d'apprendre la syntaxe indentée ("Sass").

Personnalisation des options Sass

Si vous souhaitez configurer vos options Sass, utilisez sassOptions dans 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

Implémentation

Vous pouvez utiliser la propriété implementation pour spécifier l'implémentation Sass à utiliser. Par défaut, Next.js utilise le package 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

Variables Sass

Next.js prend en charge les variables Sass exportées depuis les fichiers CSS Module.

Par exemple, en utilisant la variable Sass exportée 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>
  )
}