jekyll资产：scss.liquid文件不能与@import一起使用

为了动态渲染背景图像，我有一块SCS，如下所示：

my-div {
  background-image: url(asset_path('img_name.png'));
}

my-div {
  background-image: url(asset_path('{{ site.data.directory.background_image }}'));
}

//directory.yml
background_image: img_name.png

但是，我想做的是使用.yml文件动态导入背景图像。我想是这样的：

my-div {
  background-image: url(asset_path('img_name.png'));
}

my-div {
  background-image: url(asset_path('{{ site.data.directory.background_image }}'));
}

//directory.yml
background_image: img_name.png

这样做需要预处理scss文件。为了做到这一点，jekyll资产要求我将.liquid文件类型附加到.scss文件中，以便它能够呈现其中的所有liquid标记。但是，这样做会导致错误，因为@import无法找到.liquid文件

//styles.scss.liquid
my-div {
  ...
 }

//main.scss
@import "styles"

error: File to import not found or unreadable: styles

或者，如果我尝试导入：

@import“style.scss.liquid”

我也收到了同样的问题

---

导入和使用液体预处理器的正确方法是什么？

您应该使用Sprokets来要求使用Sprokets资产管道处理的任何内容，Sprokets不会以这种方式直接与SASS集成，Jekyll资产也不会。以下方面应起作用：

//= require ./styles.scss.liquid
body {
  // My Styles
}