使用外部 CSS 檔案

除了能在 Hugo 引用外部 CSS 檔案外，Hugo 也兼具 Webpack 角色，可順便將 CSS 加以壓縮。

Version

Hugo 0.125.2

CSS

assets/css/style.css

.title {
  color: #f00;
  font-size: 1.6rem;
  font-weight: 700;
}

在 assets 目錄下建立 CSS 檔案

HTML

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    {{ $title := "Hugo Lab" }}
    {{ $css := resources.Get "css/style.css" | minify }}
    <link rel="stylesheet" href="{{ $css.RelPermalink }}" />
    <title>{{ $title }}</title>
  </head>
  <body>
    <div class="title">{{ $title }}</div>
  </body>
</html>

Line 7

{{ $css := resources.Get "css/style.css" | minify }}

resources.Get：從 assets 目錄取得檔案
minify：將 CSS 壓縮

Line 8

<link rel="stylesheet" href="{{ $css.RelPermalink }}" />

RelPermalink：回傳檔案的相對路徑

css001

已經順利套用外部 CSS 檔案

Conclusion

雖然亦可在 static 目錄下建立 CSS 檔，但因為要使用 Hugo 的 Pipe 將 CCS 檔案加以壓縮，因此放在 assets 目錄下
在 assets 目錄下檔案，需使用 resources.Get() 取得檔案
Hugo 已經內建 CSS 的壓縮機制，只要使用 Hugo Pipe 加上 minify 即可