How to use Pug & Sass (SCSS) in Vue.js

How to use Pug & Sass (SCSS) in Vue.js 2?

I think any developer who starts using Vue.js thought about that "How can I use my favorite template engine & CSS preprocessor". First of all, It is a very simple. You just need to write a few commands and you can use these technologies in your project. I made this tutorial for a full beginner of a Vue.js framework. Hope you find it useful.

So let's start with a Pug, earlier it is known as a Jade.

For start usingPugyou just need to make a simple command, it's depends on your package manager.

So, if you using yarn, type command:

yarn add pug pug-loader

If you using NPM:

npm install pug pug-loader --save-dev

Now you can use Pug in your project, type lang="pug"in your project template, like this:

<template lang="pug">
  
</template>

Okay, you did the first part, let's move to Sass (SCSS) installations.

The first thing we need to do is set some dependencies, execute the command below:

if you use yarn:

yarn add sass-loader node-sass style-loader

and of course if you use NPM, type this:

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

Next, you need to add the settings listed below into Webpack, the configuration file located here : "build / webpack.base.conf.js"

Important! OurSCSSfiles are located in"src / assets / scss".

resolve: {
  extensions: ['.js', '.vue', '.json', 'scss'],
  alias: {
    'vue$': 'vue/dist/vue.esm.js',
    '@': resolve('src'),
    styles: resolve('src/assets/scss')
  }
},

Now you can use SCSS in your projects, for this you need to add the not tricky option lang = "scss" to the section with styles, like so:

<style>
  /* Basic CSS - no SCSS needed */
  .my-component {
    color: #336699;
  }
  
  .my-component:hover {
    color: #1a4d80;
  }
</style>

Can also be imported usingJavaScript, for example:

<script>
// Example import - in a real project, you'd have this file
import './styles.scss';
</script>

Thank you for attention!