如何與 Ant Design 搭配使用

提示

此頁面的內容來自 此問題。

PurgeCSS 的運作方式是將內容檔案中的選取器與 CSS 檔案中的選取器進行比較。當使用具有自己 CSS 的元件程式庫時，會發生 CSS 被移除，因為找不到內容。然後，您需要指定可以在哪裡找到內容。

對於 ant-design，無法從其內容中輕鬆擷取 ant-design 中使用的選取器清單。

以下是使用 PurgeCSS 與 Ant Design 和 React 的方法。此專案是使用 create-react-app 建立的。然後，它使用 react-app-rewired 來延伸設定檔。

const glob = require("glob-all");
const paths = require("react-scripts/config/paths");

const { override, addPostcssPlugins } = require("customize-cra");

const purgecss = require("@fullhuman/postcss-purgecss")({
  content: [
    paths.appHtml,
    ...glob.sync(`${paths.appSrc}/**/*.js`, { nodir: true }),
    ...glob.sync(`${paths.appNodeModules}/antd/es/button/**/*.css`, {
      nodir: true,
    }),
  ],
  extractors: [
    {
      extractor: (content) => content.match(/([a-zA-Z-]+)(?= {)/g) || [],
      extensions: ["css"],
    },
  ],
});

module.exports = override(
  addPostcssPlugins([
    ...(process.env.NODE_ENV === "production" ? [purgecss] : []),
  ])
);

我基本上新增了一個路徑到我要保留的 antd css 檔案。在以下範例中，為 button。

...glob.sync(`${paths.appNodeModules}/antd/es/button/**/*.css`,

若要保留整個 antd，您可以替換為

...glob.sync(`${paths.appNodeModules}/antd/es/**/*.css`,

並撰寫一個萃取器，用於從檔案中取得選取器的 css 檔案

  extractors: [
    {
      extractor: (content) => content.match(/([a-zA-Z-]+)(?= {)/g) || [],
      extensions: ["css"],
    },
  ],