NetlifyのビルドイメージがXenialになったのでHugo Pipesが使えるようになったからHugoでSass/SCSSを使う

タイトルの通りです。Netlifyでhugoを使う際にSass/SCSSが使えるようになりました。

Hugoでは2018/7リリースのv0.43でHugo Pipesという機能が追加され、Sass/Scssやminifyが使えるようになりました。 なのですが、Netlifyでビルドする場合はビルドイメージがUbuntu 14.04 LTS (Trusty)だったため、Pipesが利用できず、

• ビルド済みのリソースをコミットしてpushする
• LD_LIBRARY_PATHを上書きする

といったワークアラウンドで対応する必要がありました。

このたびビルドイメージがUbuntu 16.04 LTS (Xenial)になったので、netlifyでのビルド時にもPipesの機能が標準で利用できるようになりました。

A more flexible build architecture with updated Linux

ということでやってみました。

ビルドイメージでUbuntu 16.04 LTS (Xenial)を指定する

新規で作成したプロジェクトは最初からXenialが指定されるようですが、既存のプロジェクトは明示的に変更してあげる必要があります。 Deploys -> Deploy settings -> Build image selectionと辿り、Edit settingsをクリックすると次のように選択可能となっているので、Xenialを選択し Saveをクリックするだけです。簡単ですね。

---

---

ふつうにscssのアセットを使う

使い方はhugoの話になるので詳細は下記に書いてある通りです。

• Hugo Pipes Overview
• And Now: Hugo Pipes!

たとえばassets/scss/style.scssというファイルを用意したらテンプレートを下記にように書けばminifyされたcssを読み込みます。 簡単ですね。

{{ $style := resources.Get "scss/main.scss" | resources.ToCSS | resources.Minify }}
<link rel="stylesheet" href="{{ $styles.Permalink }}" >

ちなみにインラインにしたい場合は下記のようにすると実現できます。

<style>
{{ (resources.Get "scss/main.scss" | resources.ToCSS | resources.Minify ).Content | safeCSS }}
</style>

Hugoテンプレートと組み合わせて使う

sass/scssファイルをHugoのテンプレートとして扱うことも可能です。 下記のようにresources.ExecuteAsTemplateを挟むだけです。

{{ $style := $sassTemplate | resources.ExecuteAsTemplate "main.scss" . | resources.ToCSS }}

せっかくSCSSなのでファイルを分割して@importも使いたいのですが、ExecuteAsTemplate is not resolving SCSS/SASS importsにあるようにExecuteAsTemplateで扱うと@importが使えませんので注意です。

2重管理になる点が微妙ですが、scssで完結する範囲はscssで、どうしてもHugoのテンプレートとして扱う必要のある部分は別ファイルに切り出してExecuteAsTemplateで扱うようにしました。

まとめ

ということでNetlifyでもようやくHugo Pipesが使えるようになり、SCSSを使うことでスタイルの管理も楽になり、合わせてminifyも使えて非常に便利になりました。