Sass

Next.js tiene soporte integrado para Sass usando las extensiones .scss y .sass. Puedes usar Sass a nivel de componente mediante Módulos CSS y la extensión .module.scss o .module.sass.

Primero, instala sass:

npm install --save-dev sass

Es bueno saber:

Sass soporta dos sintaxis diferentes, cada una con su propia extensión. La extensión .scss requiere que uses la sintaxis SCSS, mientras que la extensión .sass requiere que uses la Sintaxis de Indentación ("Sass").

Si no estás seguro cuál elegir, comienza con la extensión .scss que es un superconjunto de CSS, y no requiere que aprendas la Sintaxis de Indentación ("Sass").

Personalización de Opciones de Sass

Si deseas configurar el compilador de Sass, usa sassOptions en next.config.js.

const path = require('path')

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

Variables de Sass

Next.js soporta variables de Sass exportadas desde archivos de Módulos CSS.

Por ejemplo, usando la variable Sass primaryColor exportada:

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