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
Top comments (1)
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-pugis deprecated, and it isn't need anymore.