Sass

Next.js tiene soporte integrado para Sass después de instalar el paquete, permitiendo el uso de las extensiones .scss y .sass. Puedes utilizar Sass a nivel de componente mediante Módulos CSS con las extensiones .module.scss o .module.sass.

Primero, instala sass:

npm install --save-dev sass

Es bueno saberlo:

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 indentada ("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 indentada ("Sass").

Personalización de opciones de Sass

Si deseas configurar el compilador de Sass, utiliza 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>
  )
}