白名单

提示

该文档适用于 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、#yep、button 将被保留在最终的 CSS 中。

模式匹配

你可以通过为 safelist.standard、safelist.deep 和 safelist.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 */