Sass

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 les extensions .module.scss ou .module.sass.

Commencez par installer 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 le compilateur Sass, utilisez sassOptions dans next.config.js.

const path = require('path')

module.exports = {
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },
}

Variables Sass

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

Par exemple, en utilisant la variable Sass primaryColor exportée :

$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>
  )
}