Jekyll で Sass(SCSS) を css に変換し style タグ内に挿入する方法

jekyll を使って scss を css に変換し style タグ内に挿入したかったがやり方が分からなかったので

やり方

css/style.scss

---
---
@charset "utf-8";
@import 'base';
@import 'layout';

を次のように変更する

_includes/css/style.scss

@charset "utf-8";
@import 'base';
@import 'layout';

次に link stylesheet で指定してたファイルを style タグ内に挿入するようにする

_layouts/default.html

  <link rel="stylesheet" href="{{ site.baseurl }}/css/style.css">

を次のように変更する

_layouts/default.html

<style>
{% capture styles %}
    {% include css/style.scss %}
{% endcapture %}
{{ styles | scssify }}
</style>

Sass の場合

scssify の部分を sassify に変えると Sass から css に変換してくれます！

---

scssify を使えば良いと言うことは分かってたがビルドできなくてあれこれ試行錯誤したら問題点は scss ファイル内の YAML front matter を記述してたせいでしたorz