Adicionando SASS/Scss ao seu projeto Vuejs (e dores de micro-frameworks)

If you came here and don't read brazillian portuguese, take this reading in english here.

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 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.