PurgeCSS

萃取器

PurgeCSS 可根據您的需求進行調整。如果您發現許多未使用的 CSS 沒有被移除，您可能需要使用特定的萃取器。

PurgeCSS 仰賴萃取器來取得檔案中使用的選擇器清單。有多種檔案類型可能包含選擇器，例如 HTML 檔案、pug 等範本檔案，甚至 JavaScript 檔案。

預設萃取器

PurgeCSS 提供一個預設萃取器，可與所有類型的檔案搭配使用，但可能有限，且不完全符合您使用的檔案類型或 CSS 架構。

預設萃取器會將檔案中的每個字詞視為選擇器。預設萃取器有一些限制

  • 不考慮特殊字元，例如 @、:、/

使用萃取器

如果您發現 PurgeCSS 沒有移除足夠的未用 CSS，或移除已使用的 CSS，使用萃取器會很有幫助。

針對副檔名使用特定的萃取器應可提供您最佳的準確度。如果您只想清除 HTML 檔案，您可能需要考慮使用 purgecss-from-html 萃取器。

您可以在 PurgeCSS 設定檔中設定萃取器選項來使用萃取器。

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
};

可用萃取器清單 (進行中)

警告

這些萃取器仍處於開發階段。不建議在實際環境中使用它們。