Capítulo 321 de 456

Sass

Core Idea

Suporte nativo a Sass (.scss/.sass) no Next.js após instalar o pacote sass, incluindo CSS Modules por componente e exportação de variáveis Sass para JS.

Key Concepts

  • .scss vs .sass: .scss é superset de CSS (sintaxe recomendada por padrão); .sass exige a Indented Syntax.
  • .module.scss / .module.sass: habilita Sass com escopo de CSS Modules por componente.
  • sassOptions: chave em next.config para configurar opções do compilador Sass.
  • sassOptions.implementation: escolhe a implementação Sass (ex. 'sass-embedded'), padrão é o pacote sass.
  • :export: bloco Sass que exporta variáveis para serem importadas como objeto JS.

Code Examples

npm install --save-dev sass
  • O que demonstra: dependência mínima para habilitar Sass no projeto.
const nextConfig: NextConfig = {
  sassOptions: {
    additionalData: `$var: red;`,
  },
}
  • O que demonstra: injetar código Sass global (variável) em todos os arquivos via additionalData.
$primary-color: #64ff00;
:export {
  primaryColor: $primary-color;
}
  • O que demonstra: exportar uma variável Sass para ser consumida como variables.primaryColor em JS/TSX.

Anti-patterns

  • Misturar .scss e .sass sem saber a diferença de sintaxe: .sass não aceita chaves/ponto-e-vírgula; causa erro de parse.

Key Takeaways

  1. Sass funciona out-of-the-box após npm install sass, sem plugin adicional.
  2. CSS Modules com Sass usam a mesma convenção .module.scss/.module.sass.
  3. Variáveis Sass podem cruzar a fronteira para JS via :export.
  4. implementation: 'sass-embedded' é uma opção alternativa de performance ao pacote sass padrão.

Connects To

  • Tailwind CSS: alternativa de styling mais usada nas versões recentes do Next.js.
AnteriorRedirectingPróximoScripts