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

Serg
codeburst
Published in
2 min readDec 31, 2017

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.

Sign up to discover human stories that deepen your understanding of the world.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Published in codeburst

Bursts of code to power through your day. Web Development articles, tutorials, and news.

Responses (4)

What are your thoughts?

Very precise and well articulated. Probably the best explanation of Proxy that I have read.

--

Very nice article, simple and concise.

--

Good nice thing to learn.

--