Capítulo 240 de 456

sassOptions

Core Idea

Configura o compilador Sass usado pelo Next.js.

Key Concepts

  • sassOptions.implementation: única propriedade tipada (ex.: 'sass-embedded'); as demais propriedades não são tipadas porque o Next.js não mantém essa superfície.
  • sassOptions.additionalData: injeta código Sass (ex.: variáveis) em todo arquivo compilado.
  • sassOptions.functions: define funções Sass customizadas, mas só funciona com Webpack. No Turbopack, funções JS customizadas não são suportadas (arquitetura Rust não executa JS passado por essa opção).

Code Examples

import type { NextConfig } from 'next'

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

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

export default nextConfig
  • O que demonstra: combinar additionalData (variável global) com implementation explícita.

Anti-patterns

  • Depender de sassOptions.functions (custom Sass functions) em projetos que usam Turbopack: não vai funcionar.

Key Takeaways

  1. Ao migrar de Webpack para Turbopack, revise se o projeto usa sassOptions.functions — é o único ponto de incompatibilidade documentado.
AnteriorrewritesPróximoserverActions