PurgeCSS

有時你可能會驚訝地發現生產環境中的一些樣式不見了，很可能是因爲它們被 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 = []

測試

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

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

瞭解更多

• PurgeCSS Safelisting.