Sass

Core Idea

Next.js tem suporte nativo a Sass (.scss/.sass) após instalar o pacote sass, incluindo CSS Modules com escopo por componente.

Key Concepts

• .scss vs .sass: .scss é superset de CSS (sintaxe recomendada por padrão); .sass exige a Indented Syntax.
• sassOptions em next.config: configura opções do compilador Sass, incluindo additionalData (código injetado em todo arquivo) e implementation (ex. sass-embedded).
• Sass variables exportadas: variáveis .module.scss podem ser exportadas via bloco :export e importadas como objeto JS.

Code Examples

npm install --save-dev sass

• O que demonstra: instalação obrigatória do pacote sass (não vem embutido).

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

• O que demonstra: injetar variável Sass global via sassOptions.additionalData.

$primary-color: #64ff00;

:export {
  primaryColor: $primary-color;
}

import variables from './variables.module.scss'

export default function Page() {
  return <h1 style={{ color: variables.primaryColor }}>Hello, Next.js!</h1>
}

• O que demonstra: exportar variável Sass do módulo CSS para uso direto em JS.

Key Takeaways

1. Sass precisa do pacote sass instalado explicitamente; não é bundled com Next.js.
2. Use .module.scss/.module.sass para CSS Modules com escopo de componente.
3. :export é o mecanismo pra compartilhar valores Sass (cores, breakpoints) com lógica JS/TS.

Connects To

• CSS Modules: mecanismo base de escopo reutilizado pelo suporte a Sass.