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