【Hugo】HugoでSass(SCSS)を使う

前提

環境: Windows Hugo: v0.125.4

Dart Sassのインストール

Hugo ExtendedにはLibSassが含まれているが、非推奨となっているため、Dart Sassをインストールして使う。

scoop install sass

The extended version of Hugo includes LibSass to transpile Sass to CSS. In 2020, the Sass team deprecated LibSass in favor of Dart Sass. Use the latest features of the Sass language by installing Dart Sass in your development and production environments.

CSSに変換して読み込む

scssファイルは themes/theme_name/assets/sass/main.scss に配置

{{ $opts := dict
  "transpiler" "dartsass"
  "targetPath" "css/style.css"
  "vars" site.Params.styles
  "enableSourceMap" (not hugo.IsProduction) 
  "includePaths" (slice "node_modules/bootstrap/scss")
}}
{{ with resources.Get "sass/main.scss" | toCSS $opts | minify | fingerprint }}
  <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
{{ end }}

上記の内容のファイルを layouts/partials/head/scss.html などに作成し、headタグ内で以下を記載する。

{{ partialCached "head/scss.html" . }}

partial ではなく partialCached を使用することで高速化できるようだが、ページ数の少ないサイト/ブログでは影響は少ないと思われる。 しかし、後で partialCached に変更していくのも面倒なので、キャッシュが使えそうなところでは partialCached を使っていってもいいのかもしれない。

気が付いたら増えているCSSファイル

気が付いたら public/css の下に大量にCSSファイルができてた。
サーバーを立ち上げた状態で、main.scssを編集し保存していたことが原因みたい。
公開されているテーマを使用している場合はあまり関係ないが、テーマを自作している場合はCSSファイルが増えているかもしれない。
自分の場合は、 public 以下は.gitignore に入れていて生成されたものについてはあまり気にしていなかったため、気が付いた時には大量になっていた。
public以下に不要なファイルがある場合は以下のオプションを付けて実行すると削除してくれる。
mdファイルを削除したり、ファイル名を変更しても、public以下のファイルは削除されないので、そういう時にも使える。

hugo --cleanDestinationDir

関連記事

• 【Hugo】Hugoの基本的な文法

  前提 Hugo: v0.125.4 変数 定義 {{ $foo := "foo" }} 代入 {{ $foo = "bar" }} テンプレート内での使用 <p>{{ $foo }}</p> 比較 Eq arg1 == arg2 {{ eq 1 1 }} # true {{ eq 1 2 }} # false {{ eq "foo" "foo" }} # true {{ eq "foo" "bar" }} # false 参考
• 【Hugo】Hugoの環境構築

  前提 環境: Windows Hugo: v0.125.4 インストール バイナリをダウンロードして配置 Githubからバイナリをダウンロード Releases latest ダウンロードしたファイルを解凍し、任意の