如何在css文件中使用Jekyll baseurl

Question

我正在使用 Jekyll 在 Github 页面上托管一个网站。问题在于引用 css 文件中的文件路径。

我想做这样的事情：

body { {background: #FFF url('{{ site.baseurl}}/images/page_bg.JPG') center 0 no-repeat; background-attachment: fixed; color: #4b595f; }

但是 Jekyll 似乎没有处理 css 文件，因此 site.baseurl 永远不会被交换出去。

在其他情况下，我无法将其更改为内联样式，因此假设这不可能。

Answer 1

使用 Brian Willis 答案中的技巧在

@import

编辑的文件中不适用于 SASS。

相反，您可以这样做：

main.scss

---
---
$baseurl: "{{ site.baseurl }}";
@import "myfile";

_sass/_myfile.scss

myclass {
  background: url($baseurl + "/my/image.svg");
}

别忘了

Answer 2

Jekyll 处理所有具有 YAML 开头内容的文件。在文件的开头粘贴一个前文部分（即使它是空的），Jekyll 会正确地转换它。尝试在文件开头使用它：

---
title: CSS stylesheet
---

Answer 3

上面提出的解决方案对我不起作用；如果我向 main.scss 添加前题，则无法正确处理它。

我的解决方案是使用模块配置：

在 main.scss 文件的最顶部定义一个可配置变量。

main.scss

$baseurl= "" !default;
...

@font-face {
  font-family: 'My_font';
  src: url($baseurl + "/assets/fonts/font_file.ttf");
}

参考主文件并传递 $baseurl 的值

_sass/my_file.scss

---
---    
@use "main" with (
   $baseurl: "{{site.baseurl}}"
 );

找到参考