HUGOテンプレートからSassに変数を渡す方法 - ひよこまめ

HUGO v0.109.0で追加された、HUGOテンプレートからSassに変数を渡す機能を試した。 HUGOにおけるSassの標準ライブラリであるLibSassでも利用できるが、if構文を使いたかったため、この記事ではDartSassを使用する。 要約 テンプレート：toCSSのvarsオプションに、変数を定義したmapを渡す {{- $vars := ( dict "color1" "#1fb6ff" "color2" "#7e5bef" ) -}} {{- $opts := ( dict "transpiler" "dartsass" "vars" $vars ) -}} {{- $style := resources.Get "scss/main.scss" | toCSS $opts | fingerprint -}}

[kzbe]

“渡された変数を使う箇所で @use "hugo:vars as 名前空間" する。 @use では名前空間を区切ることができるので、as 名前空間 とすると、使うときに 名前空間.変数名 でアクセスできる。”