# 白名单

您可以将选择器(selectors)列入白名单中,以阻止 PurgeCSS 从 CSS 中将它们删除。这可以通过设置 PurgeCSS 的 whitelistwhitelistPatternswhitelistPatternsChildren 参数来实现,也可以直接在 CSS 中添加特殊的注释来实现。

# 指定选择器

你可以通过 whitelist 参数来设置白名单。

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

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

# 模式匹配

你可以通过 whitelistPatternswhitelistPatternsChildren 参数设置基于正则表达式匹配的选择器白名单。

const purgecss = new Purgecss({
    content: [], // content
    css: [], // css
    whitelistPatterns: [/red$/],
    whitelistPatternsChildren: [/blue$/]
})

在此示例中,以 red 结尾的选择器(例如 .bg-red)以及以 blue 结尾的子选择器(例如 blue p.bg-blue .child-of-bg)将保留在最终的 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 */