PurgeCSS

提取器

PurgeCSS 可以根据你的需要进行调整。如果你注意到很多未使用的 CSS 没有被删除，你可能需要使用特定的提取器。

PurgeCSS 依赖提取器来获取文件中使用的选择器列表。有多种类型的文件可以包含选择器，例如 html 文件、pug 等模板文件，甚至 javascript 文件。

默认提取器

PurgeCSS 提供了一个默认提取器，该提取器适用于所有类型的文件，但可能有限，不完全适合你正在使用的文件类型或 CSS 框架。

默认提取器将文件中的每个单词都视为选择器。默认提取器有一些限制

  • 不考虑特殊字符，例如 @、:、/

使用提取器

如果你注意到 PurgeCSS 没有删除足够的未使用的 CSS 或删除了已使用的 CSS，使用提取器可能很有用。

为扩展名使用特定提取器应该可以为你提供最佳准确性。如果你想专门清除 html 文件，你可能需要考虑使用 purgecss-from-html 提取器。

你可以通过在 PurgeCSS 配置文件中设置 extractors 选项来使用提取器。

import purgeJs from "purgecss-from-js";
import purgeHtml from "purgecss-from-html";

const options = {
  content: [], // files to extract the selectors from
  css: [], // css
  extractors: [
    {
      extractor: purgeJs,
      extensions: ["js"],
    },
    {
      extractor: purgeHtml,
      extensions: ["html"],
    },
  ],
};
export default options;

创建提取器

提取器是一个简单的函数，它将文件的内容作为字符串获取，并返回一个选择器数组。按照惯例，npm 包的名称为 purgecss-from-[typefile]（例如 purgecss-from-pug）。使用此惯例将允许用户通过搜索 purgecss-from 来查看 npm 上的提取器列表。

const purgeFromJs = (content) => {
  // return array of css selectors
};

可用提取器列表（进行中）

警告

这些提取器仍处于开发中。不建议在生产中使用它们。