VuePress 中自定义 CSS 样式不生效怎么办?

Mr-秀兰 阅读 19

我在 VuePress 项目里尝试覆盖默认样式,但加的 CSS 好像完全没起作用,不知道是不是引入方式不对。

我把样式写在了 .vuepress/styles/index.styl 里,也试过在 Markdown 文件里用 style 标签,都不行。比如下面这段想改标题颜色的代码:

.content h1 {
  color: #ff6b6b !important;
}

页面渲染出来还是原来的黑色,控制台也没报错,真的搞不懂是哪里出了问题……

我来解答 赞 3 收藏
二维码
手机扫码查看
1 条解答
皇甫国红
这问题我之前也踩过坑,八成是选择器没对上。VuePress 默认主题的内容区 class 名是 theme-default-content,不是 content,所以你写的 .content h1 根本没匹配到元素。

改一下选择器就行:

.theme-default-content h1 {
color: #ff6b6b;
}


另外说一句,!important 能不用就别用,后期维护起来全是泪。VuePress 默认主题的样式优先级不算高,直接覆盖就行。

如果还是不生效,打开浏览器开发者工具,检查一下那个 h1 元素实际挂了哪些 class 名,不同版本的主题可能结构略有差异。我之前帮同事排查过一次,结果是他自己装了个第三方主题,选择器完全不一样,白折腾半天。

顺便提一下,.vuepress/styles/index.styl 这个位置是对的,VuePress 会自动加载。但如果你用的是 VuePress 2.x,建议换成 .vuepress/styles/index.scss 或者直接在 client.js 里引入样式文件,官方现在更推荐这种方式。

写样式覆盖之前,养成习惯先 F12 看一眼 DOM 结构,能省不少调试时间。
点赞 1
2026-03-01 08:24