Question

我第一次使用Jekyll建立投资组合网站。我在定制HTML时没有遇到任何问题，但是当我按照自定义CSS的说明进行操作时，我做bundle exec jekyll serve之后不会应用我所做的更改。以下是我按照此github help link的说明尝试的内容：我创建了一个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文件。之后，当我刷新页面时，按钮没有改变。我很欣赏任何关于我应该做些什么的提示。谢谢

Answer 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;
}

Answer 2

我会先尝试关闭字符串。
错误： @import“ {{site.theme}};
对： @import“ {{site.theme}}”;

在Jekyll模板中自定义CSS样式

2 个答案: