在 Hugo 裡使用 SASS

SASS檔案

• 只能把sass檔案放在

  1. /assets/scss/
  2. /themes/your-theme/assets/scss/

• 在layouts 資料夾裡加上

{{ $styles := resources.Get "scss/main.scss" | toCSS | minify | fingerprint }}

• | 為Hugo的管線(pipe)操作，簡單的說就是會依順序指定sass檔案、轉成CSS、CSS檔壓縮、檔名加上hash code
• resources.Get "scss/main.scss"
  • 取得main.scss這個檔案做為管線的輸入
• toCSS
• 將main.scss轉換成CSS
• minify
  • 壓縮CSS檔
• fingerprint
  • 將壓縮過的CSS檔，檔名加上HASH Code，這樣這版本的CSS的檔名會是唯一的，可以避免載入快取裡的CSS檔

HTML中加入CSS檔的link

<link rel=”stylesheet” href=”{{ $styles.Permalink }}” integrity="{{ $styles.Data.Integrity" media=”screen”>

• $styles.Permalink
  • 依目前的Server取得這資源的網址

優先權

• 如果你使用現成的主題，已有SCSS檔案，可以在/assets/scss裡建立一個同名的文件來擁有較高的優先權