Adicionando SASS/Scss ao seu projeto Vuejs (e dores de micro-frameworks)
Tags: javascript, vue, sass
Published: 2020-07-07 16:38:31

_If you came here and don't read brazillian portuguese, take this reading in english [here](https://dev.to/matheuscas/adding-sass-scss-to-your-vuejs-project-and-micro-frameworks-pains-4j5g)._

Isso será rápido. Aqui estão minhas `devDependencies`:
```
"devDependencies": {
    "@vue/cli-plugin-babel": "^3.0.0-rc.12",
    "@vue/cli-plugin-eslint": "^3.0.0-rc.12",
    "@vue/cli-service": "^3.0.0-rc.12",
    "vue-template-compiler": "^2.5.17"
  }
```
Estou lhe dizendo isso porque você pode estar usando o Vue CLI v4 ou qualquer outra versão que já tenha esse problema resolvido. Para usar o SASS/Scss em seu <template> como este `<style lang ="scss"></style>`, seu `devDependencies` se tornará:

```
"devDependencies": {
    "@vue/cli-plugin-babel": "^3.0.0-rc.12",
    "@vue/cli-plugin-eslint": "^3.0.0-rc.12",
    "@vue/cli-service": "^3.0.0-rc.12",
    "fibers": "^5.0.0",
    "node-sass": "^4.14.1",
    "sass": "^1.26.9",
    "sass-loader": "7.1.0",
    "style-loader": "^1.2.1",
    "vue-template-compiler": "^2.5.17"
  },
```
Preste atenção ao `"sass-loader ":" 7.1.0",`. Esta é a chave principal para fazer isso funcionar, porque parece que há problemas de compatibilidade entre o Vue CLI 3 e as versões recentes do `sass-loader`. Ah, e você também deve adicionar ao seu `vue.config.js` o seguinte:
```
configureWebpack: {
      module: {
        rules: [
          {
            test: /\.s(c|a)ss$/,
            use: [
              'vue-style-loader',
              'css-loader',
              {
                loader: 'sass-loader',
                // Requires sass-loader@^7.0.0
                options: {
                  implementation: require('sass'),
                  fiber: require('fibers'),
                  indentedSyntax: true // optional
                },
              },
            ],
          },
        ],
      },
    }
```

Créditos a esse cara que me ajudou muito: https://stackoverflow.com/a/47898293/2631087

**Deve funcionar**, caso contrário, comente abaixo. E também acho que deve haver uma maneira mais elegante de resolver isso - eu só não encontrei ainda 😅.

### Agora, o seguinte texto não será tão rápido.

Eu sou um cara angular. Fã e desenvolvedor desde quando era o AngularJS. E eu sei que hoje em dia, ainda mais, o Angular é bem verboso, enorme comparado ao Vuejs (React, Svelte) e pode ser bem complicado algumas vezes devido ao Zonejs e outras "mágicas". MAS ... Funciona! Ele simplesmente funciona!

Eu nunca precisei me incomodar em usar ou não CSS ou SASS, e se eu quisesse, bastava mudao uma opção simples na CLI. E ainda mais, **nunca passei uma hora inteira tentando encontrar a solução para esse tipo de problema** 🤯. Que foi que gerou esse post. 
Eu não preciso do axios, outro exemplo, porque o Angular já tem HTTP embutido e tantas outras **escolhas** que eles já fizeram que eu, em geral, me sinto confortável (o pessoal do Emberjs entende esse sentimento, eu acho) .

Esta não é uma carta contra o Vuejs ou qualquer outra lib ou "micro framework", mas uma carta para quem está mudando de mundo (como eu) ou que está começando agora e precisa escolher entre Angular, Vuejs, Emberjs, React ou qualquer outro FW/lib.

Ps .: Apesar de muitas coisas, **estou gostando muito do Vuejs**.