Skip to content

Commit

Permalink
Revert "featupport built-in pug config and document using pro-process…
Browse files Browse the repository at this point in the history
…ors at component (#151)"

This reverts commit 4c7795a.
  • Loading branch information
yyx990803 authored Apr 23, 2018
1 parent 4c7795a commit ffa9154
Show file tree
Hide file tree
Showing 3 changed files with 0 additions and 67 deletions.
29 changes: 0 additions & 29 deletions docs/guide/using-vue.md
Original file line number Diff line number Diff line change
Expand Up @@ -121,35 +121,6 @@ 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.
Expand Down
31 changes: 0 additions & 31 deletions docs/zh/guide/using-vue.md
Original file line number Diff line number Diff line change
Expand Up @@ -121,37 +121,6 @@ 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>` 标签。
Expand Down
7 changes: 0 additions & 7 deletions lib/webpack/createBaseConfig.js
Original file line number Diff line number Diff line change
Expand Up @@ -71,13 +71,6 @@ 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
Expand Down

0 comments on commit ffa9154

Please sign in to comment.