diff --git a/docs/default-theme-config/README.md b/docs/default-theme-config/README.md index 6781942910..ecb851b13a 100644 --- a/docs/default-theme-config/README.md +++ b/docs/default-theme-config/README.md @@ -421,34 +421,30 @@ $codeBgColor = #282c34 ### Existing issues -In order to override the default variables mentioned above, `override.styl` will be imported at the end of the `config.styl` in default theme, and this file will be used by multiple files, so once you wrote styles here, your style will be duplicated by multiple times. See [#637](https://github.com/vuejs/vuepress/issues/637). - -In fact, `style constants override` and `styles override` are two things, the former should be executed before any CSS is compiled, while the latter should be generated at the end of the CSS bundle, which has the highest priority. +In order to override the default variables mentioned above, `override.styl` will be imported at the end of the `config.styl` in default theme, and this file will be used by multiple files, so once you wrote styles here, your style would be duplicated by multiple times. See [#637](https://github.com/vuejs/vuepress/issues/637). ### Migrate your styles to `style.styl` -Start from `0.12.0`, we split `override.styl` into two APIs: `override.styl` and `style.styl`: +In fact, The `stylus constants override` should be completed before all Stylus files are compiled; and the `user's additional CSS styles` should be generated at the end of the final style file. Therefore, these two duties should not be completed by the same stylus file. -If you wrote styles at `override.styl` in the past, e.g. +Start from `0.12.0`, we split `override.styl` into two APIs: `override.styl` and `style.styl`. If you wrote styles at `override.styl` in the past, e.g. ``` stylus // override.styl -$textColor = red // style constants override +$textColor = red // stylus constants override -#my-style {} // styles override or custom styles. +#my-style {} // your extra styles. ``` You'll need to separate the style part to `style.styl`: ``` stylus -// override.styl -// SHOULD ONLY focus on style constants override. +// override.styl, SHOULD ONLY contain "stylus constants override". $textColor = red ``` ``` stylus -// style.styl -// SHOULD focus on styles override or your custom styles. +// style.styl, your extra styles #my-style {} ``` diff --git a/docs/zh/default-theme-config/README.md b/docs/zh/default-theme-config/README.md index 8ce95d1a55..fb8271b327 100644 --- a/docs/zh/default-theme-config/README.md +++ b/docs/zh/default-theme-config/README.md @@ -414,6 +414,35 @@ $borderColor = #eaecef $codeBgColor = #282c34 ``` +### 低版本存在的问题 + +为了 override 上述提及的 [Stylus](http://stylus-lang.com/) 默认样式常量,`override.styl` 将会在默认主题的 `config.styl` 的末尾被导入。但是,由于 `config.styl` 可能会被多个文件导入,所以,一旦你在这里写样式,你的样式将会被重复多次。参考: [#637](https://github.com/vuejs/vuepress/issues/637)。 + +### 将你的样式迁移到 `style.styl` + +事实上,`stylus 常量的 override` 应该在编译所有 Stylus 文件之前完成;而用户额外的 CSS 样式由应该被生成在最终样式文件的末尾。因此这两项职责不应该由同一个 stylus 文件来完成。 + +从 `0.12.0` 开始,我们将 `override.styl` 拆分为两个 API:`override.styl` 和 `style.styl`。如果你过去在 `override.styl` 中书写了样式,如: + +``` stylus +// override.styl +$textColor = red // stylus 常量的 override + +#my-style {} // 你的样式 +``` + +你将需要将你的样式部分分离到 `style.styl`: + +``` stylus +// override.styl,应该仅仅包含 stylus 常量的 override +$textColor = red +``` + +``` stylus +// style.styl,你的样式 +#my-style {} +``` + ## 自定义页面类 有时候你可能需要为特定页面添加一个 CSS 类名,以方便针对该页面添加一些专门的 CSS。这种情况下你可以在该页面的 YAML front matter 中声明一个 `pageClass`: