loading...
Cover image for How to use Pug and SCSS with Vue

How to use Pug and SCSS with Vue

reiallenramos profile image Rei Allen Ramos ・1 min read

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

Posted on by:

reiallenramos profile

Rei Allen Ramos

@reiallenramos

Ruby/Ember dev learning to blog. Writing simple and straight-to-the-point tutorials!

Discussion

markdown guide
 

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.