Sass

Next.js prend en charge nativement Sass avec 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.

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

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