diff --git a/packages/docs/docs/config/README.md b/packages/docs/docs/config/README.md index 57a120399b..32351853cb 100644 --- a/packages/docs/docs/config/README.md +++ b/packages/docs/docs/config/README.md @@ -187,6 +187,35 @@ VuePress provides a convenient way to add extra styles. You can create a `.vuepr - [Why can’t `palette.styl` and `index.styl` merge into one API?](../faq/README.md#why-can-t-palette-styl-and-index-styl-merge-into-one-api) +::: warning +Because of the behavior behind the scenes, in both `palette.styl` and `index.styl`, the normal `.css` style sheets are not allowed to be imported by [@import / @require](https://stylus-lang.com/docs/import.html) from **relative paths**. +::: + +::: tip +What if you have to import / require normal `css` style sheets? **Absolute path**. + +1. Importing / requiring a file from an npm package: + +``` stylus +@require '~my-css-package/style.css' +``` + +2. Importing / requiring a local file: + +As there’s an [alias](../plugin/option-api.html#alias) option out there, using webpack alias must be the simplest approach. For example: + +```js +// config.js + alias: { + 'styles': path.resolve(__dirname, './styles') + } +``` + +``` stylus +@require '~styles/style.css' +``` +::: + ## Theming ### theme @@ -321,7 +350,7 @@ This option is also included in [Plugin API](../plugin/option-api.md#extendmarkd - Default: `['h2', 'h3']` While preparing the page, headers are extracted from the Markdown file and stored in `this.$page.headers`. By default, VuePress will extract `h2` and `h3` elements for you. You can override the headers it pulls out in your `markdown` options. - + ``` js module.exports = { markdown: { diff --git a/packages/docs/docs/zh/config/README.md b/packages/docs/docs/zh/config/README.md index a7a14db401..5f87eb6270 100644 --- a/packages/docs/docs/zh/config/README.md +++ b/packages/docs/docs/zh/config/README.md @@ -179,6 +179,36 @@ VuePress 提供了一种添加额外样式的简便方法。你可以创建一 } ``` +::: warning +由于背后的行为,不论是在 `palette.styl` 或是 `index.styl` ,都不能透过 [@import / @require](https://stylus-lang.com/docs/import.html) 從**相对路径**引用一般的 `.css` 样式表。 +::: + +::: tip +那如果你非得要 import / require 一般的 `.css` 样式表呢? **绝对路径**。 + +1. 从 npm package 引用档案: + +``` stylus +@require '~my-css-package/style.css' +``` + +2. 引用本地档案: + +因为已经有 [alias](../plugin/option-api.html#alias) 这个选项,使用 webpack 别名会是最简单的方式,举例如下: + +```js +// config.js + alias: { + 'styles': path.resolve(__dirname, './styles') + } +``` + +``` stylus +@require '~styles/style.css' +``` +::: + + ## 主题 ### theme @@ -313,7 +343,7 @@ module.exports = { - 默认值: `['h2', 'h3']` Markdown 文件的 headers (标题 & 小标题) 会在准备阶段被提取出来,并存储在 `this.$page.headers` 中。默认情况下,VuePress 会提取 `h2` 和 `h3` 标题。你可以通过这个选项来修改提取出的标题级别。 - + ``` js module.exports = { markdown: {