TIP

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

# 白名单

你可以指定哪些 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 (opens new window) 来验证正则表达式是否能匹配到你所要查找的内容。

# 直接在 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 */