Vuepress: Support for pre-processors in .vuepress/components

[aminimalanimal]

Is there a way to get VuePress to support pre-processors like pug and sass?

[ulivz]

Good question, thanks!

For using pug and sass at you custom component, you need to do following things:

1. Install essential dependencies:

yarn add sass-loader node-sass -D # for sass
yarn add pug-plain-loader pug -D # for pug

Since config for scss, sass, stylus, less has been built in VuePress, you ONLY need to extend for pug at your .vuepress/config.js:

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('pug')
      .test(/\.pug$/)
      .use('pug-plain-loader')
        .loader('pug-plain-loader')
        .end()
  }
}

Then you can create a custom component (e.g. Pug.vue) at .vuepress/components:

<template lang="pug">
  p.pug {{ msg }}
</template>

<script>
  export default {
    data () {
      return {
        msg: 'Hello, Pug'
      }
    }
  }
</script>

<style lang="sass">
  .pug
    font-size: 20px
</style>

Enjoy your writing!

[yyx990803]

We should add built-in config for pug and document this in the config section.

[aminimalanimal]

Wonderful! That worked.

I don't know if this is worth documenting as well, but I wasn't entirely sure whether I should install the dependencies within the .vuepress folder or (the correct way) from the root of my project, which makes package.json, node_modules, and .vuepress siblings.

[ulivz]

fixed at #151 and docs are here: https://vuepress.vuejs.org/guide/using-vue.html#using-pre-processors