HugoでSass/Scssを使う


はじめに

Hugo が v0.43 からSass/Scss をサポートしたので、この機能を使ってブログのデザインを変更しました。
設定方法や、困ったことなどをまとめます。

注意

2018/08/26 現在、Netlify では Hugo の extended バージョンをフォローしていないため、Sass/Scss のビルド機能が利用できません。
ワークアラウンド対応を本記事の最後に記載しています。

Hugo で Sass/Scss を使う

まずは、assets/scss/に Scss ファイルを用意します。(本記事ではassets/scss/main.scssを用意)
テンプレートで以下のように定義することで利用できます。

{{ $styles := resources.Get "scss/main.scss" | toCSS | postCSS | minify | fingerprint }}
<link rel="stylesheet" href="{{ $styles.Permalink }}" integrity="{{ $styles.Data.Integrity }}" media="screen">

ファイルに対する処理をパイプで書き連ねられます。この例では

  1. CSS に変換
  2. PostCSS を実行
  3. minify を実行
  4. fingerprint を生成

という処理を順番に行っています。

PostCSS を使う場合

PostCSS を使う場合はpostcss-cliモジュールが必要です。先にインストールしておきましょう。

npm install -g postcss-cli

ビルドをする

ビルドはいつもどおりhugoコマンドを実行するだけで OK です。
ビルドが成功すると、resourcesディレクトリに css ファイルが出来上がります。

Netlify でデプロイできない問題が発生

v0.43 以降から Sass のビルドができるようになりましたが、利用するためには Hugo の extended バージョンが必要です。

❌: v0.46
⭕: v0.46/extended

Netlify では extended バージョンがまだサポートされていないためビルドが行えません。

関連 Issue

https://github.com/netlify/build-image/issues/182

Netlify でデプロイするためのワークアラウンド

ビルドして生成されるresourcesディレクトリを一時的にコミットすることで対応しました
こうすることでビルド時に resources の生成がパスされるようになりデプロイが通ります。

おわりに

Sass/Scss が使えるようになったことで、より使いやすくなりました。
この機能が使えるのは v0.43 以降の extended バージョンのみです。そして、Netlify ではまだ extended バージョンがサポートされていないため、先にresourcesディレクトリを含めておく必要がありました。