Cómo usar Sass en Next.js

Next.js tiene soporte integrado para Sass una vez instalado el paquete, utilizando tanto las extensiones .scss como .sass. Puedes usar Sass a nivel de componente mediante Módulos CSS y las extensiones .module.scss o .module.sass.

Primero, instala sass:

npm install --save-dev sass

Nota importante:

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").

Personalizar opciones de Sass

Si deseas configurar las opciones de Sass, usa sassOptions en next.config.

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  sassOptions: {
    additionalData: `$var: red;`,
  },
}

export default nextConfig

Implementación

Puedes usar la propiedad implementation para especificar qué implementación de Sass usar. Por defecto, Next.js usa el paquete sass.

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  sassOptions: {
    implementation: 'sass-embedded',
  },
}

export default nextConfig

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