Como usar Sass (ou SCSS) no seu projeto SvelteKit

Eu gosto muito da conveniência que o Sass proporciona, e ainda é uma combinação perfeita com Svelte, já que a marcação, lógica e estilos dos componentes ficam juntos num só arquivo. Instalar o Sass em um projeto Svelte qualquer é bem simples, mas como fazer isso num projeto SvelteKit?

Primeiro de tudo, é necessário adicionar os pacotes do próprio sass e o svelte-preprocess como dependências de desenvolvimento ao nosso projeto:

npm i -D sass svelte-preprocess

Depois, abra o arquivo svelte.config.js que fica na raíz do projeto e importe o svelte-preprocess que acabamos de instalar. Seu arquivo ficará mais ou menos assim:

svelte.config.js

import sveltePreprocess from 'svelte-preprocess';

const config = {
  preprocess: sveltePreprocess(),
  // ...
};

export default config;

Parabéns! 🎉 Você acabou de instalar Sass no seu projeto SvelteKit, sem aperreio. Agora você pode usar a tag <style lang="sass"> dentro dos seus componentes:

<style lang="sass">
  @import 'vars.sass'

  div
    color: $primary
    border-radius: .5rem
</style>

No entanto, se você prefere SCSS no lugar de Sass, é só trocar a linguagem de sass para scss na tag <style> e pronto:

<style lang="scss">
  @import 'vars.scss';

  div {
    color: $primary;
    border-radius: .5rem;
  }
</style>

Por fim, pode ser um pouco chato ter que escrever essa tag manualmente, por isso eu criei um snippet no meu VSCode que faz isso por mim. É só apertar [ F1 ] (pode ser diferente no seu sistema), selecionar Preferences: Open User Snippets e criar um novo snippet com o seguinte código:

{
  "Add SASS style tag": {
    "prefix": "style:sass",
    "body": [
      "<style lang=\"sass\">",
      "  $0",
      "</style>"
    ],
    "description": "Add SASS style tag"
  }}
}

Com isso, ao invés de digitar a tag manualmente, você só precisa digitar “style:sass” dentro do seu arquivo.

Aproveite!