使用 slate 主题覆盖 github 页面上的 CSS？答案

【问题标题】：Overriding CSS on github pages using slate theme?使用 slate 主题覆盖 github 页面上的 CSS？
【发布时间】：2018-10-11 19:21:09
【问题描述】：

我正在尝试覆盖我的 github.io 页面上的“forkme”横幅，以便更好地了解 Jekyll、HTML、CSS 和 GitHub 的工作原理。

为此，我创建了我的./assets/css/style.css 文件，正如官方文档自述文件中关于如何自定义官方支持的 GitHub 主题的 CSS 中所述。我在其中添加了以下 CSS：

#forkme_banner { display: none; }

但是，运气不好，横幅并没有消失。即使像 #test {testing: testtest;} 这样在 CSS 文件中添加虚构元素也不会在我的 CSS 文件中添加该行。

【问题讨论】：

请存储库网址。
github.com/usefuljapanese/lex/blob/gh-pages/assets/css/…
@DavidJacquel github.com/usefuljapanese/lex/blob/gh-pages/assets/css/…
它只是来自于有用japanese.github.io 存储库的示例代码，还是您将 css 托管在 lex 存储库中？
@DavidJacquel 这不是示例代码，它应该是呈现给 www.l-ex.tokyo 的真实内容...

标签： css jekyll github-pages

【解决方案1】：

将 assets/css/style.css 重命名为 style.scss 并将您的 scss 代码更改为：

---
---
@import "{{ site.theme }}";
#footer_wrap {display: none;}
#forkme_banner {display: none;}
#downloads {display: none;}
#whocares {haha: hehe;}

【讨论】：

我试过了，但没有运气。我假设jekyll由于某种原因没有重建，我会给github一些时间，也许有队列延迟。但是，我注意到您推荐“style.scss”，而文档指定“style.css”。此外，您在标题之后删除一个换行符，而文档在标题和第一个 @import 语句之间插入一个换行符：
啊，我现在在我的存储库设置页面上收到一个错误：您的网站在构建时遇到问题：您的 SCSS 文件 assets/css/style.scss 在第 1 行有错误：要导入的文件未找到或不可读：。加载路径：/hoosegow/.bundle/ruby/2.3.0/gems/jekyll-theme-slate-0.0.3/_sass。有关详细信息，请参阅help.github.com/articles/page-build-failed-invalid-sass-or-scss。
不幸的是，安装 jekyll 以进一步排除故障不是我的选择，因为文章建议......还有其他想法吗？
github.com/usefuljapanese/lex/blob/gh-pages/assets/css/…
@import "{{ site.theme }}"; 似乎在本地工作，但不在 github 页面上。它现在似乎起作用了（请参阅我的 fork [here][1] 和 result [here][2]）。你可以尝试推动一个小的提交来强制重新生成，看看它是否有效。

【解决方案2】：

首先也是最重要的一点是，CSS 更改需要时间来更新，因为它将被缓存在他们的服务器上。我通常需要 15-45 分钟，但很少有人需要 3 小时。如果我没记错的话，我认为这取决于 Github 页面被冲洗的服务器位置。

即将发布

`./assets/css/style.css

 // change to 

./assets/css/style.scss`

应该改为.scss。

我遇到的另一个问题是

---
---
@import "{{ site.theme }}";
/* "{{ site.theme }}" = Your theme name */
/* Eg: @import 'jekyll-theme-cayman'; */

/* Your css rules goes after this */
.page-header {
    background: #191c20;
}

【讨论】：