跳到主要内容

白名单

tip

该文档适用于 PurgeCSS 3.0 及更高版本。如需查看 PurgeCSS 2.x 版本的文档,请点击 此处

白名单

你可以指定哪些 CSS 选择器可以保留在最终的 CSS 中。这可以通过 PurgeCSS 的 safelist 参数或者直接在 CSS 中添加特殊注释来达成。

特定选择器

你可以通过 safelist 参数设置需要保留的选择器。

const purgecss = new Purgecss({
content: [], // content
css: [], // css
safelist: ['random', 'yep', 'button']
})

在这个例子中,选择器 .random#yepbutton 将被保留在最终的 CSS 中。

模式匹配

你可以通过为 safelist.standardsafelist.deepsafelist.greedy 设置正则表达式来指定需要保留的选择器。

const purgecss = new Purgecss({
content: [], // content
css: [], // css
safelist: {
standard: [/red$/],
deep: [/blue$/],
greedy: [/yellow$/]
}
})

在此示例中,以 red 结尾的选择器(例如 .bg-red),以 blue 结尾的选择器(例如 blue p.bg-blue .child-of-bg)及其子元素,以及选择器中任意一部分以 yellow 结尾(例如 button.bg-yellow.other-class)的,都将被保留到最终的 CSS 中。

这里所说的模式匹配指的是正则表达式。你可以使用 regexr 来验证正则表达式是否能匹配到你所要查找的内容。

直接在 CSS 中指定

您可以直接在 CSS 中将白名单放入特殊的注释中。 使用 /* purgecss ignore */ 将以下规则加入白名单中。

/* purgecss ignore */
h1 {
color: blue;
}

使用 /* purgecss ignore current */ 将当前规则加入白名单中。

h1 {
/* purgecss ignore current */
color: blue;
}

你可以使用 /* purgecss start ignore *//* purgecss end ignore */ 将某一范围的规则加入白名单中。

/* purgecss start ignore */
h1 {
color: blue;
}

h3 {
color: green;
}
/* purgecss end ignore */

h4 {
color: purple;
}

/* purgecss start ignore */
h5 {
color: pink;
}

h6 {
color: lightcoral;
}

/* purgecss end ignore */

陷阱

某些 CSS 优化工具(例如 PostCSS 或 cssnano)会在 PurgeCSS 运行之前将代码中的注释删除掉,因为在开发阶段经常是禁用这些步骤的,因此可能不会引起注意。为防止这些注释被删除,你可以使用感叹号将这些功能性注释标记为重要。

/*! purgecss start ignore */
h5 {
color: pink;
}

h6 {
color: lightcoral;
}

/*! purgecss end ignore */