css 中的根路径（Jekyll）答案

【问题标题】：Root path in css (Jekyll)css 中的根路径（Jekyll）
【发布时间】：2017-04-03 15:07:32
【问题描述】：

我使用变量 {{ root_url }} 来访问我的网站 (Jekyll) 的根路径 (/)。例如。我可以用它来包含外部css文件的路径。

    <link rel="stylesheet" href="{{ root_url }}/css/main.css">

但是在我的 css/main.css 中，我无法访问 {{ root_url }} 例如。

input {
    background: url(/{{ root_url }}/img/search-icon.png);
}

图片不显示，因为 {{ root_url }} 在 css 中不可访问。如何在 css 中访问 {{ root_url }}？

【问题讨论】：

标签： css path jekyll relative-path

【解决方案1】：

您可以使用相对路径。由于 CSS 位于一层深的子文件夹中，因此您可以这样做：

input {
    background: URL(../img/search-icon.png)
}

【讨论】：

这对我有用。 scss 中的 front matter 不行。

【解决方案2】：

jekyll 仅处理带有前端内容的文件。

如果你想在 css 中使用液体，你必须在你的 css/main.css 中添加一个前端（甚至是空的）：

---
# this is an empty front matter that instruct jekyll
# to process this file with liquid
---
input {
    background: url(/{{ root_url }}/img/search-icon.png);
}

【讨论】：