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.