Ant Designでの使用方法

ヒント

PurgeCSSは、コンテンツファイル内のセレクタをCSSファイル内のセレクタと比較することで機能します。独自のCSSを持つコンポーネントライブラリを使用する場合、コンテンツが見つからないためCSSが削除されます。コンテンツが見つかる場所を指定する必要があります。

ant-designの場合、ant-designで使用されるセレクタのリストは、そのコンテンツから簡単には取得できません。

以下は、Ant DesignとReactでPurgeCSSを使用する方法です。プロジェクトは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"],
    },
  ],

# Ant Designでの使用方法

Ant Designでの使用方法