diff --git a/docs/guide/using-vue.md b/docs/guide/using-vue.md
index 3090b1cd06..e7e88dc4d0 100644
--- a/docs/guide/using-vue.md
+++ b/docs/guide/using-vue.md
@@ -121,6 +121,35 @@ Inside any markdown file you can then directly use the components (names are inf
 Make sure a custom component's name either contains a hyphen or is in PascalCase. Otherwise it will be treated as an inline element and wrapped inside a `<p>` tag, which will lead to hydration mismatch because `<p>` does not allow block elements to be placed inside it.
 :::
 
+### Using Pre-processors
+
+VuePress has built-in webpack config for the following pre-processors: `sass`, `scss`, `less`, `stylus` and `pug`. All you need to do is installing the corresposnding dependencies. For example, to enable `sass`, install the following in your project:
+ 
+``` bash
+yarn add -D sass-loader node-sass
+```
+
+Now you can use the following in markdown and theme components:
+
+``` vue
+<style lang="sass">
+.title
+  font-size: 20px
+</style>
+```
+
+Using `<template lang="pug">` requires installing `pug` and `pug-plain-loader`:
+
+``` bash
+yarn add -D pug pug-plain-loader
+```
+
+::: tip
+If you are a Stylus user, you don't need to install `stylus` and `stylus-loader` in your project because VuePress uses Stylus internally.
+  
+For pre-processors that do not have built-in webpack config support, you will need to [extend the internal webpack config](../config/#configurewebpack) in addition to installing the necessary dependencies.
+:::
+
 ## Script & Style Hoisting
 
 Sometimes you may need to apply some JavaScript or CSS only to the current page. In those cases you can directly write root-level `<script>` or `<style>` blocks in the markdown file, and they will be hoisted out of the compiled HTML and used as the `<script>` and `<style>` blocks for the resulting Vue single-file component.
diff --git a/docs/zh/guide/using-vue.md b/docs/zh/guide/using-vue.md
index 107213c628..9d09af1013 100644
--- a/docs/zh/guide/using-vue.md
+++ b/docs/zh/guide/using-vue.md
@@ -121,6 +121,37 @@ export default {
 请确保一个自定义组件的名字包含连接符或者是 PascalCase，否则，它将会被视为一个内联元素，并被包裹在一个 `<p>` 标签中，这将会导致 HTML 渲染紊乱，因为 HTML 标准规定， `<p>` 标签中不允许放置任何块级元素。
 :::
 
+
+## 使用预处理器
+
+VuePress 对以下预处理器已经内置相关的 webpack 配置：`sass`、`scss`、`less`、`stylus` 和 `pug`。要使用它们你只需要在项目中安装对应的依赖即可。例如，要使用 `sass`，需要安装：
+
+```bash
+yarn add -D sass-loader node-sass
+```
+ 
+然后你就可以在 Markdown 或是组件中使用如下代码：
+
+```vue
+<style lang="sass">
+  .title
+    font-size: 20px
+</style>
+```
+
+要在组件中使用 `<template lang="pug">`，则需要安装 `pug` 和 `pug-plain-loader`:
+
+```bash
+yarn add -D pug pug-plain-loader
+```
+
+::: tip
+需要指出的是，如果你是一个 `stylus` 用户，你并不需要在你的项目中安装 `stylus` 和 `stylus-loader`，因为 VuePress 已经内置了它们。
+  
+对于那些没有内置的预处理器，除了安装对应的依赖，你还需要 [拓展内部的 Webpack 配置](../config/#configurewebpack)。
+:::
+
+
 ## 脚本和样式提升
 
 有时，你可以只想在当前页面应用一些 JavaScript 或者 CSS，在这种情况下，你可以直接在 Markdown 文件中使用原生的 `<script>` 或者 `<style>` 标签，它们将会从编译后的 HTML 文件中提取出来，并作为生成的 Vue 单文件组件的 `<script>` 和 `<style>` 标签。
diff --git a/lib/webpack/createBaseConfig.js b/lib/webpack/createBaseConfig.js
index b791342822..2493ae25ba 100644
--- a/lib/webpack/createBaseConfig.js
+++ b/lib/webpack/createBaseConfig.js
@@ -71,6 +71,13 @@ module.exports = function createBaseConfig ({
           }
         })
 
+  config.module
+    .rule('pug')
+    .test(/\.pug$/)
+    .use('pug-plain-loader')
+      .loader('pug-plain-loader')
+      .end()
+
   if (!siteConfig.evergreen) {
     const libDir = path.join(__dirname, '..')
     config.module