Jekyll 水平导航栏问题

Question

我正在尝试在 jekyll 网站中制作水平导航栏。我不确定我使用的 CSS 是否不正确，或者是否无法使用 Jekyll 正确编译。

这是我目前的方法： - 在 _scss/_layout.css 中进行更改 - 检查 _site/main.css 中的更改（它们是） - 检查 jekyll 服务控制台中的错误（看不到任何错误）

当我查看生成的网站并点击检查时，我没有看到正在应用的 CSS 更改。

_sass/_layout.scss 中的 Sass 代码：

 ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
 }

 li {
 list-style-type: none;
 margin: 0;
 padding: 0;
 }

 h1 {
 text-align: center;
 font-weight: 200;
 }

 header {
 background: $header;
 padding: 0px 15px;
 text-align: center;
 margin: 50px 0 0;
 height: 50vh;
 display: flex;
 justify-content: center;
 align-items: center;
 }

我的网站的完整存储库在这里 - https://github.com/ericadohring/groupdayout/，我们将不胜感激！

Answer 1

Github 页面不再显示更改，因为有一个错误阻止 Jekyll 构建您的网站。

在_sass/_layout.scss 中有一个使用未定义变量的属性：

header {
   background: $header;
   ...
}

要修复它，只需在使用变量之前为其分配一个值，例如：

$header: #f0ad4e;
header {
   background: $header;
   ...
}

现在您将能够在您的网站上工作并看到在 Github 页面中反映的更改。