2

我第一次使用 Jekyll 来构建一个投资组合网站。我在自定义 HTML 时没有遇到任何问题，但是当我按照自定义 CSS 的说明进行操作时，我所做的更改不会在我执行后应用bundle exec jekyll serve。以下是我尝试按照此github 帮助链接中的说明进行的操作：我创建了一个 CSS 文件 (assets/css/style.css)，并在其顶部放置了这段代码：

--- 
---
@import "{{ site.theme }};

/* sample code to test it */

.button {
background-color: red;
}

然后，在 head.html 文件中，我确保通过添加以下内容来链接这个新创建的样式表：

<link rel="stylesheet" href="{{- 'assets/css/style.css' | relative_url -}}" />
<link rel="stylesheet" href="{{- 'assets/css/main.css' | relative_url -}}" />

请注意，main.css 是模板附带的原始 CSS 文件。之后，当我刷新页面时，按钮没有改变。我将不胜感激有关我应该以不同方式做些什么的任何提示。谢谢

4

2 回答 2

1

它与您调用 css 的顺序有关。

css 有一个级联模型，其中您调用的最后一个 css 具有偏好。

尝试将您的 css 放在默认出现的 css 之后。

<link rel="stylesheet" href="{{- 'assets/css/main.css' | relative_url -}}" />
<link rel="stylesheet" href="{{- 'assets/css/style.css' | relative_url -}}" />

如果它不起作用，请输入重要信息。

--- 
---
@import "{{ site.theme }};

/* sample code to test it */

.button {
  background-color: red !important;
}

如果这也不起作用，只需将另一个类放在css和html中的按钮上

--- 
---
@import "{{ site.theme }};

/* sample code to test it */

.btn {
  background-color: red;
}
于 2018-04-02T14:00:00.533 回答
0

我会尝试的第一件事是关闭字符串。

错误的： @import "{{ site.theme }};

正确的： @import "{{ site.theme }}";

于 2019-01-24T14:52:36.733 回答