提示

文件適用於 PurgeCSS 3.0 及以上版本。如需查看 PurgeCSS 2.x 的文件，請按一下 這裡

安全清單

您可以指出哪些選擇器可以安全地保留在最終的 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 */