mnml

HugoでSass/Scssを使う

Icon

70_10

はじめに

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

Support extended Hugo version · Issue #182 · netlify/build-image
favicon

github.com

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

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

おわりに

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

#Web Frontend