How to use Pug and SCSS with Vue

Why use pre-processors?

increase coding speed (not typing speed)
reduce source code size
and my personal favorite: DRY

Install Pug

In the root folder of your Vue application:

npm install -D pug pug-plain-loader

Then, while still in the root folder, create a new file webpack.config.js with:

module.rules = {
  test: /\.pug$/,
  loader: 'pug-plain-loader'
}

Done! To make sure your Vue component compiles with it, add lang="pug" to the <template> tags, like so:

<!-- before -->
<template>
  <div class="awesome-class">
     <h1>Hello World!</h1>
  </div>
</template>

<!-- after -->
<template lang="pug">
  .awesome-class
    h1 Hello World!
</template>

References:
Pug homepage
Vue-loader Pug guide
Pug cheatsheet

Install SCSS

In the root folder of you Vue application:

npm install -D sass-loader node-sass

Then, edit webpack.config.js so that it looks like this:

module.exports = {
  module: {
    rules: [
      {
        test: /\.pug$/,
        loader: 'pug-plain-loader',
      },
      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  },
}

Done! Adjust your component files by adding lang="scss" to the <style> tags.

<!-- before -->
<style scoped>
/* old css */
</style>

<!-- after -->
<style lang="scss" scoped>
/* write scss here */
</style>

Note: If you'd rather use the indent-based cousin, Sass, head on over to the Vue-loader Sass guide for the necessary modifications.

References:
Vue-loader Sass guide
Sass cheatsheet

Blog

How to use Pug and SCSS with Vue

Rei Allen Ramos

Why use pre-processors?

Install Pug

Install SCSS

Join Our Newsletter. No Spam, Only the good stuff.

Related