返回介绍

简单的 CSS 覆盖

发布于 2019-05-30 21:57:09 字数 1230 浏览 1674 评论 0 收藏 0

如果你希望对默认主题的样式应用简单的覆盖,可以创建一个 .vuepress/override.styl 文件。 这是 Stylus 文件,但你也可以使用普通的 CSS 语法。

有几个颜色变量可以调整:

// 显示默认值
$accentColor = #3eaf7c
$textColor = #2c3e50
$borderColor = #eaecef
$codeBgColor = #282c34

仍然存在的问题 < 0.12.0

为了覆盖上面提到的默认变量,override.styl 将在默认主题的 config.styl 末尾导入,这个文件将被多个文件使用,所以一旦你在这里写了样式,你的 样式将被多次复制。参考 #637。

迁移你的样式到 style.styl 0.12.0+

事实上,style constants overridestyles override 是两个东西,前者应该在编译 CSS 之前执行,而后者应该在 CSS bundle 末尾生成,它具有最高优先级。

0.12.0 开始,我们将 override.styl 分成两个 API:override.stylstyle.styl 。如果你以前在 override.styl 中编写样式,例如:

// .vuepress/override.styl
$textColor = red // stylus constants override.

#my-style {} // your extra styles.

你需要抽离这部分样式到 style.styl:

// .vuepress/override.styl, SHOULD ONLY contain "stylus constants override".
$textColor = red
// .vuepress/style.styl, your extra styles.
#my-style {}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文