PurgeCSS

2023年4月15日 1 分鐘閱讀開發文檔 PurgeCSS CSS SCSS

本頁內容

有時你可能會驚訝地發現生產環境中的一些樣式不見了，很可能是因爲它們被 PurgeCSS 刪除了。本文介紹瞭如何防止樣式被 PurgeCSS 刪除。

有多種方式將樣式添加到 PurgeCSS 的安全列表，以避免被移除。

通過註釋添加到安全列表

該方法使用特殊的註釋，以告知 PurgeCSS 別移除樣式。

1/*! purgecss start ignore */
2
3// STYLES GOES HERE.
4
5/*! purgecss end ignore */

HB 支持配置 PurgeCSS，此種方式對於通過 JavaScript 使用到的 classes、ids 和 tags 來說十分實用，因爲 Hugo 無法得知 JS 使用了哪些樣式。

1classes = []
2ids = []
3tags = []
4attributes = []
5safelist_deep = []
6safelist_greedy = []
7safelist_standard = []

請將 [name] 替換爲你的模塊名稱。對於主題使用者，可使用 custom 作爲模塊名。

Name	Type	Description
`classes`	array	HTML 類名，如 `w-100`、`bg-success`。
`ids`	array	HTML `id`.
`tags`	array	HTML tags，如 `h1`、 `a`。
`attributes`	array	HTML attributes，如 `data-bs-theme`。
`safelist_deep`	array	PurgeCSS 安全列表模式¹.
`safelist_greedy`	array	PurgeCSS 安全列表模式¹.
`safelist_standard`	array	PurgeCSS 安全列表模式¹.

我們可以通過 -e、--renderToDisk 和 --disableFastRender 標識於本地進行測試。

1hugo server \
2  -e production \
3  --gc \
4  --renderToDisk \
5  --disableFastRender \
6  -b http://localhost:1314 \
7  -p 1314