1. HUGO SCSS 試してみたらエラーが発生

HUGOはSCSSをサポートしているとのことで試してみました。

マニュアルに従って試してみたけどエラーが発生。

知っていれば避けることができることでも知らなければ当然はまる。

この記事では発生したエラーと対応方法を取り上げます。

  1. エラー発生

  2. 情報収集

  3. エラーの原因

  4. HUGO再インストール

の順に説明します。

2. エラー発生

下記マニュアルに従いSCSSを試してみました。

いままではSCSSを使わないでCSSを直書き。SCSSを少し調べて便利そうなのでお試ししてみようと思った次第。

SCSSファイルを作成し試してみるとエラーが発生。

エラーメッセージ
error: failed to transform resource: TOCSS: failed to transform

毎度トラブルに遭遇するのは残念ですがブログネタができたと喜ぶことに…​。

情報を収集します。

3. 情報収集

下記の情報源を発見。

Hugo Pipesの機能を使います。 SASS / SCSS | Hugo ただし、extendedバージョンが必要です。 現在はNetlifyでは動きません。 extendedバージョンが必要なのは、以下に記載されています。

Release v0.43 · gohugoio/hugo

— HugoでSass/SCSSを使う方法
ikemo memo

有用な情報共有に感謝申し上げます。

4. エラーの原因

HUGOにはextendedバージョンが存在。SCSSを使用するにはこのバージョンをインストールする必要がありました。

今までこのようなバージョンが存在することに気づかず。

HUGOのマニュアルを確認してみると触れられてはいます。

Debian and Ubuntu @anthonyfok and friends in the Debian Go Packaging Team maintains an official hugo Debian package which is shared with Ubuntu and is installable via apt-get:

sudo apt-get install hugo What this installs depends on your Debian/Ubuntu version. On Ubuntu bionic (18.04), this installs the non-extended version without Sass/SCSS support. On Ubuntu disco (19.04), this installs the extended version with Sass/SCSS support.

— Install Hugo
@ HUGO

19.04なら extended version がインストールされるようです。

そもそも、このマニュアルの方法では古いバージョンがインストールされるため推奨されていません。

This option is not recommended because the Hugo in Linux package managers for Debian and Ubuntu is usually a few versions behind as described here

— Install Hugo
@ HUGO

5. HUGO再インストール

から.debをダウンロードしてインストールします。

各バージョンの下の方の_extendが付いたアーカイブをダウンロード。

以前インストールしたHUGOはremoveしてから再インストールします。

Terminal
sudo apt remove hugo
wget https://github.com/gohugoio/hugo/releases/download/v0.69.0/hugo_extended_0.69.0_Linux-64bit.deb
sudo apt install ./hugo_extended_0.69.0_Linux-64bit.deb

無事インストールできました。

HUGOのバージョンを確認してみます。

Terminal
$ hugo version
Hugo Static Site Generator v0.69.0-4205844B/extended linux/amd64 BuildDate: 2020-04-10T09:16:58Z

/extended とあるので無事インストールできています。

これでSCSSが機能するようになりました。

6. まとめ

無知が故に問題が発生してしまいました。

以前にこのブログで書いたHUGOのインストール方法についてもリライトしました。

同じような状況で悩んでいる方の参考になったら幸いです。

今回は以上です。