次世代 Hugo

無駄を削ぎ、本質を研ぐ

整合 Hugo 與 LibSass

Sam Xiao's Avatar 2025-07-20

Hugo 內建支援 LibSass，可直接使用。

Version

Hugo 0.148.0

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")
    "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")
  "targetPath" "css/main.css"
}}
  • 省略 transpiler 參數，預設使用 LibSass

Conclusion

  • LibSass 雖然已經停止更新，但因為其包含了 Scss 最重要功能，且速度也比 Dart Sass 快，若用不到 Scss 新語法，其實 LibSass 也很夠用

# Hugo