jekyll-assets：scss.liquid文件不能与@import

Question

为了动态渲染背景图像，我有一块看起来像这样的SCSS：

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

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

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

//directory.yml
background_image: img_name.png

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

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

//main.scss
@import "styles"

error: File to import not found or unreadable: styles

或者，如果我尝试导入： @import "styles.scss.liquid"我遇到同样的问题。

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

Answer 1

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

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