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’s 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 using Pug you 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! Our SCSS files 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 lang="scss">
  
</style>

For import .scss files you need to type “@import”, for example:

<style lang="scss">
  @import '../assets/scss/main';
  
</style>

Can also be imported using JavaScript, for example:

<script>
import scss from './assets/scss/main'

</script>

Thank you for attention!

I hope you liked this article, and most important if you found it useful.