Jekyll:在SCSS中使用_config.yml中的值 [英] Jekyll: Using values from _config.yml in SCSS

问题描述

在Jekyll项目中，我的_config.yml文件中包含以下内容:

In my Jekyll project, I have the following in my _config.yml file:

colors:
  - name: red
    hex: '#FF0000'
  - name: yellow
    hex: '#FFFF00'
  - name: blue
    hex: '#0000FF'

在assets/css/colors.scss中，我要为颜色创建类，如下所示:

In assets/css/colors.scss, I want to create classes for the colors as follows:

{% for color in site.colors %}
.{{ color.name }} {
  color: {{ color.hex }};
}
{% endfor %}

这样做时，出现以下错误:

When I do so, I get the following error:

Error in _assets/css/background-test.scss:6 Invalid CSS after "}": expected selector or at-rule, was "{% for color in..." 
  Liquid Exception: Invalid CSS after "}": expected selector or at-rule, was "{% for color in..." in _includes/head.html, included in _layouts/default.html
jekyll 3.0.1 | Error:  Invalid CSS after "}": expected selector or at-rule, was "{% for color in..."

有没有办法让Liquid来处理SCSS中_config.yml文件中的值?

Is there a way to get Liquid to process the values from the _config.yml file in the SCSS?

推荐答案

如果您想让Jekyll处理您的scss文件，则必须为其添加前置内容.

If you want Jekyll to process your scss file you must add a front matter to it.

这有效:

---
# empty front matter
---
@charset "utf-8";

{% for color in site.colors %}
.{{ color.name }} {
  color: {{ color.hex }};
}
{% endfor %}

这篇关于Jekyll:在SCSS中使用_config.yml中的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！