Edited at

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

https://blog.x39.dev/tech/sass-jekyll/ に記事を移しました。最新の更新はブログの方を見てください!!


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