整合 Hugo 與 Dart Sass | 次世代 Hugo

Hugo 內建支援 LibSass，其實也相當夠用，但 LibSass 已經停止支援，若想用最新的 Sass 語法，則必須另外安裝 Dart Sass，且 Hugo 已經原生支援 Dart Sass。

Version

Hugo 0.148.0
Dart Sass 1.89.2

Install Dart Sass

$ brew install sass/sass/sass

• 使用 Homebrew 安裝 Dart Sass，會自動將其加到 PATH

Hugo

$ hugo env

• 確認 Hugo 已經抓到 Dart Sass

toCSS

partials/css.html

<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{{ .Site.Title }}</title>
<link rel="icon" href="/favicon.ico" />
{{ with resources.Get "scss/main.scss" }}
  {{ $opts := dict
    "enableSourceMap" hugo.IsDevelopment
    "outputStyle" (cond hugo.IsDevelopment "expanded" "compressed")
    "transpiler" "dartsass"
    "targetPath" "css/main.css"
  }}
  {{ with . | toCSS $opts }}
    {{ if hugo.IsDevelopment }}
      <link rel="stylesheet" href="{{ .RelPermalink }}" />
    {{ else }}
      {{ with . | fingerprint }}
        <link
          rel="stylesheet"
          href="{{ .RelPermalink }}"
          integrity="{{ .Data.Integrity }}"
          crossorigin="anonymous" />
      {{ end }}
    {{ end }}
  {{ end }}
{{ end }}

• 專門處理 CSS 的 css partial

Line 6

{{ $opts := dict
  "enableSourceMap" hugo.IsDevelopment
  "outputStyle" (cond hugo.IsDevelopment "expanded" "compressed")
  "transpiler" "dartsass"
  "targetPath" "css/main.css"
}}

• transpiler dartsass：toCSS() 另外提供 transpiler 參數，預設為內建的 libsass，必須特別指定 dartsass，Hugo 才會使用環境安裝的 Dart Sass

Conclusion

• 以前要安裝 Sass 環境相當麻煩，但 Hugo 已經大幅簡化 Sass 安裝步驟，只要使用 Homebrew 安裝 Dart Sass，並在 toCSS() 加上 transpiler dartsass 即可