Hugo css.SassのOptions

Hugo

使用環境

Name	Version
Hugo	v0.134.3-extended

前書き

ドキュメントのcss.Sassを見ていると、将来的にOptionsが増えるかもしれないと思いました。*1

本題

改善する方法がないか考えてみました。

従来の方法

今までだと、下記のように記述していました。

{{- $options := (dict "targetPath" "assets/css/vanilla.css" "transpiler" "dartsass" "outputStyle" "expanded" "includePaths" (slice "themes/v4/node_modules")) -}}

.Site.Data を使う方法

data/css.yamlを作成して、YAML形式で、記述します。

targetPath: "assets/css/vanilla.css"
transpiler: "dartsass"
outputStyle: "expanded"
includePaths:
  - "themes/v4/node_modules"

{{ $options2 := index .Site.Data.css }}

結果

$optionsと$options2の中身は、同じです。

<pre>{{ debug.Dump $options }}</pre>
<pre>{{ debug.Dump $options2 }}</pre>

{
  "includePaths": [
    "themes/v4/node_modules"
  ],
  "outputStyle": "expanded",
  "targetPath": "assets/css/vanilla.css",
  "transpiler": "dartsass"
}

後書き

実際に使用しているコードは、下記の通りです。

  {{- $options2 := index .Site.Data.css -}}
  {{- with resources.Get "scss/vanilla.scss" | toCSS $options2 -}}
  <link rel="stylesheet" href="{{ .RelPermalink }}">
  {{- end -}}

*1:予想は外れるかも？