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 使用了哪些样式。

assets/hb/modules/[name]/purgecss.config.toml
1classes = []
2ids = []
3tags = []
4attributes = []
5safelist_deep = []
6safelist_greedy = []
7safelist_standard = []
NameTypeDescription
classesarrayHTML 类名,如 w-100bg-success
idsarrayHTML id.
tagsarrayHTML tags,如 h1a
attributesarrayHTML attributes,如 data-bs-theme
safelist_deeparrayPurgeCSS 安全列表模式1.
safelist_greedyarrayPurgeCSS 安全列表模式1.
safelist_standardarrayPurgeCSS 安全列表模式1.

测试

我们可以通过 -e--renderToDisk--disableFastRender 标识于本地进行测试。

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

了解更多