如何与 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"],
    },
  ],