First of all, here is a warning with this part: SASS doesn't work as the pure SASS does on Vue. Now, what does this mean?

A normal SASS behaviour would be as it follows:

SASS/SCSS file -> is compiled to normal CSS.

In Vue, we won't see the resulting CSS file. It'll be automatically detected and translated internally in our Vue project.

In our open terminal, inside our vue project's folder (where we want to install SASS), we'll type the next line

npm install --save-dev -D sass-loader node-sass

After this finishes, we'll search inside our build folder a file named webpack.base.conf.js, and paste this inside our "module, rules" code block:

  module: {
    rules: [
// PASTE THIS PART Start
        {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader'
        ]
      },
// PASTE THIS PART Ending

Now,

A Vue component has the next structure modules:

Template; Script; Style.

Template and script will remain the same; however, we must now indicate to our style block that now he speaks in SASS|SCSS. How? As it follows:

<style lang="scss" scoped>
/** Your styles here. **/
</style>

Now, we will create a simple HTML code inside our template block that we'll be using for the purpose of our first testing:

<template>
   <div>
      <h1>This is my new project</h1>
      <h3>I'm implementing SASS!</h3>
   </div>
</template>

After that, we will add these lines inside our <style lang="scss" scoped> block:

// Custom variables.
$color-customred: #ff3c32;
$color-customgreen: #32ff5b;

h1{
   color: $color-customred;
}
h3{
   color: $color-customgreen;
}

We'll type

npm run dev

in our terminal. Now, we'll type our localhost direction in our browser and...

Now you may be wondering...

We will create a css folder inside our 'src' folder. Inside that css folder, we'll create a _fonts.scss file.

Inside our _fonts.scss file, we'll paste the following lines:

// CUSTOM FONTS
@import url('https://fonts.googleapis.com/css?family=Catamaran|Merriweather&display=swap');

// FONTS VARIABLES
$catamaran-font: 'Catamaran', sans-serif;
$merriweather-font: 'Merriweather', serif;

It's time to use this awesome partial into our style block. Let's go back to our component and link it:

// Importing our partial.
@import '../css/fonts.scss';
// Custom variables.
$color-customred: #ff563c;
$color-customgreen: #3cffa1;

h1{
  color: $color-customred;
  // Using our custom fonts.
  font-family: $merriweather-font;
}
h3{
  color: $color-customgreen;
  // Using our custom fonts.
  font-family: $catamaran-font;
}

Now you already set up your Vue project. It admits SASS and it is able to import your SASS partials. You could do the same importing more partials or creating mixins, functions and the long etc that SASS has.

Our next part is implementing Bulma CSS, which, if you still haven't heard about it, you should Check it already because it is a GREAT alternative to Bootstrap.