DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for How to use Pug and SCSS with Vue
Rei Allen Ramos
Rei Allen Ramos

Posted on

How to use Pug and SCSS with Vue

Why use pre-processors?

  1. increase coding speed (not typing speed)
  2. reduce source code size
  3. 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

Top comments (1)

Collapse
patarapolw profile image
Pacharapol Withayasakpunt

If you use Vue CLI, you don't even need to setup Webpack. It is automagically loaded, if you've got the right packages.

I think vue-cli-plugin-pug is deprecated, and it isn't need anymore.

🌚 Turn on dark mode

πŸ”  Change your default font

πŸ“š Adjust your experience level to see more relevant content

Β 

Head to your account's Settings to do all this and more.