HUGOのテーマを作成するにあたり、Dart Sassを使用しようと思ったらエラーでちょっと困ったことになったのでここに記録を残したいと思います。

目次

  1. scss→cssしたい
  2. docker compose upでエラー発生
  3. 解決方法
  4. まとめ


scss→cssしたい

scssを使用したいと思い、Dart Sassを入れることにしました。
HUGOではtranspilerのデフォルトがLibSassなのですが、Dart Sassを使用したかったので別途インストールが必要になります。

themes/inoue-kk-blog/layouts/partials/head/css.html

{{ with resources.Get "scss/main.scss" }}
  {{ $opts := dict
    "enableSourceMap" (not hugo.IsProduction)
    "outputStyle" (cond hugo.IsProduction "compressed" "expanded")
    "targetPath" "css/main.css"
    "transpiler" "dartsass"
  }}
  {{ with . | toCSS $opts }}
    {{ if hugo.IsProduction }}
      {{ with . | fingerprint }}
        <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
      {{ end }}
    {{ else }}
      <link rel="stylesheet" href="{{ .RelPermalink }}">
    {{ end }}
  {{ end }}
{{ end }}

参考：https://gohugo.io/functions/css/sass/

themes/inoue-kk-blog/hugo.toml

[params.sass]
transpiler = 'dartsass'

themes/inoue-kk-blog/assets/scss配下にmain.scssを置きました。

Dart Sassはコンテナイメージにインストールされていたのでそのままいきます。
ちなみにコンテナはUbuntuです。


docker compose upでエラー発生

docker compose upすると以下のようなエラーが発生。

Error: error building site: TOCSS-DART: failed to transform “sass/main.scss” (text/x-scss): got unexpected EOF when executing “sass”. The user running hugo must have read and execute permissions on this program. With execute permissions only, this error is thrown.

どうやら権限周りのエラーのようです。
しかし、権限を$ ls -l $(which sass)と確認してみても特に問題なし…。
Dart Sassを使用しないようにcss.htmlを書き直して、コンテナを立ち上げてsassが実行できるかを確認しました。
→ 問題なく実行できました。

Dart Sass自体はちゃんとインストールできていて、権限周りも問題なさそう。
ということは、HUGOでDart Sassを使用するのが問題なのか？と考えました。

そこで出会ったのがこちらの記事。
Error building site: TOCSS-Dart

こちらの記事によるとhugo env実行時に出力される

sass --embedded is unavailable in pure JS mode.

がどうやらダメだそうで。

調べてみるとコンテナイメージでnpmを使ってDart Sassをインストールしていたのですが、それが良くなかったようです。

公式ドキュメントを確認してみると
Linux環境にインストールする方法は
brew install sass/sass/sass or sudo snap install dart-sass が記載されています。

Homebrewを入れようとすると

Homebrew on Linux is not supported on ARM processors.

とのエラーが。
公式をみるとサポートしていないようです。
https://docs.brew.sh/Homebrew-on-Linux#arm-unsupported

次にsnapを入れようとすると、なぜかパッケージがないよと言われてしまいインストールできませんでした。

詰み。


解決方法

Dockerfileに以下のコードを追加しました。

ARG TARGETARCH

RUN : Install dartsall pre-built binary\
  && test "${TARGETARCH}" = "amd64" && curl -o /tmp/dart-sass.tar.gz -L https://github.com/sass/dart-sass/releases/download/1.83.4/dart-sass-1.83.4-linux-x64.tar.gz || : NOP\
  && test "${TARGETARCH}" = "arm64" && curl -o /tmp/dart-sass.tar.gz -L https://github.com/sass/dart-sass/releases/download/1.83.4/dart-sass-1.83.4-linux-arm64.tar.gz || : NOP\
  && tar xvf /tmp/dart-sass.tar.gz -C /tmp/\
  && mv /tmp/dart-sass/ /usr/local/\
  && ln -fs /usr/local/dart-sass/sass /usr/local/bin/\
  && :

Dart sassをpre-built binaryでインストールし直しました。
dockerとgithub actionsで実行環境がamd64、arm64と異なるので、場合分けする処理を追加しています。

これでなんとか動きました。よかった。


まとめ

Dockerコンテナ内でDart Sassをnpmでインストールすると権限不足のエラーが出てしまったので、
pre-built binaryをインストールしたほうがよさそうです。






こちらのブログは初心者エンジニアが勉強の記録やアウトプットの一環として執筆しております。
内容に誤りがある可能性が多大にありますのでご了承ください。