やりたいこと
HugoでSass/SCSSを使う方法です。
前提条件
Hugo 0.43以上が必要です。0.48で確認しています。
概要
- Hugo Pipesの機能を使います。
- ただし、
extendedバージョンが必要です。 - 現在はNetlifyでは動きません。
extendedバージョンが必要なのは、以下に記載されています。
Hugo is now released with two binary version: One with and one without SCSS/SASS support. At the time of writing, this is only available in the binaries on the GitHub release page. Brew, Snap builds etc. will come. But note that you only need the extended version if you want to edit SCSS. For your CI server, or if you don’t use SCSS, you will most likely want the non-extended version.
手順
extendedバージョンを取得
まず、そもそも普通に入れたらextendedバージョンになる場合があるため、
hugo versionコマンドで確認します。v0.48/extendedのように出ればOKです。
GitHubから取得する場合は、Hugoのリリースページより、extendedがついたアーカイブを取得します。
テンプレートへの組み込み
他のHugo Pipesの機能と同じなので、概要だけ。
.sassファイルの作成resources.ToCSSを使う。
補足
Netlifyで動かない理由は、以下のIssueに記載されています。
Issueの内容を見ると、Ubuntu 14.04を使っているのが原因のようです。 Ubuntu 14.04は2019/04にサポートが切れるので、遅くともそれまでにはなんとかなりそうですね。
NetlifyでSass/SCSSを使うには
手元でビルドして、結果をコミットするのが良いみたいです。 IssueにはHugoでビルドする方法が書かれていますが、自分はnode-sassを使いました。 (Hugoの方が楽かも・・・)