未完成で完成形

noob から hacker になりたい

Jekyll で sass を css に変換し style タグ内に挿入する方法

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

AMP HTML ページを用意する場合などに使えます。

追記: hugo で行う方法も追記しました

やり方

いままで下記のようにアクセスしてた css ファイルを

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

を次のように変更する

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

簡単に解決することができました。

Sass の場合

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