Adding SASS/Scss to your Vuejs project (and micro frameworks pains)

Se você não ler em Inglês, esse mesmo artigo está escrito em português brasileiro, aqui.

This will be quick. Here's my 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"
  }

I'm telling you this because you may have using Vue CLI v4 or any other version that has this issue already solved. To use SASS/Scss in your template like this <style lang="scss"></style> your devDependencies will become

"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"
  },

Pay attention to "sass-loader": "7.1.0",. This is the main key to make this works, because it seems that there's compatibility issues between Vue CLI 3 and sass-loader recent versions. Oh, and also you must add to your vue.config.js this:

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
                },
              },
            ],
          },
        ],
      },
    }

Credits to this guy that helped me a lot: https://stackoverflow.com/a/47898293/2631087

It should work, otherwise comment bellow. And also I think that there's should be a more elegant way to solve this - I just didn't find yet 😅.

Now, the following won't be that quick.

I'm an Angular guy. Real fan and developer since when it was AngularJS. And I know that even more nowadays Angular is pretty (damn) verbose, huge compared to Vuejs (React, Svelte) and can be real tricky some times due to Zonejs and other "magics". BUT...It works! It just works!

I have never bother myself in use or not CSS or SASS except to switch a simple option in CLI. And even more, I have never spent an hour just trying to find the solution for this kind of issue 🤯. Which led me to write this post.
I don't need axios, other example, because Angular already have HTTP built-in and so many other choices already made that I'm, in general, most comfortable with (Emberjs folks understand that feeling, I think).

This is not a letter against Vuejs or any other lib or "micro framework", but a letter to whom is switching worlds (like me) or who is starting now and have to choose among Angular, Vuejs, Emberjs, React or any other FW/lib.

Ps.: Despite of many things, I'm really enjoying Vuejs.