React antdのオンデマンドロードとカスタムテーマ

ここで私が使っている方法は、npm run ejectという方法でwebpackの設定を公開し、自分で設定を変更する方法です。

less 環境設定

antdはlessに基づいて書かれているので、カスタムテーマはlessを使用し、Reactはlessをサポートします。

• configの下にあるwebpack.config.jsを開き、sassの設定を参考に以下の設定を追加します。

  const lessRegex = /\.less$/;
  const lessModuleRegex = /\.module\.less$/;
  // ....
  {
   test: lessRegex,
   exclude: lessModuleRegex,
   use: getStyleLoaders(
   {
   importLoaders: 3,
   sourceMap: isEnvProduction && shouldUseSourceMap,
   },
   'less-loader'
   ),
   sideEffects: true,
   },
   {
   test: lessModuleRegex,
   use: getStyleLoaders(
   {
   importLoaders: 3,
   sourceMap: isEnvProduction && shouldUseSourceMap,
   modules: {
   getLocalIdent: getCSSModuleLocalIdent,
   },
   },
   'less-loader'
   ),
   },
  

• より少ない、より少ないローダーをインストール

  yarn add less less-loader or npm i less less-loader -S
  

• オリジナルの.cssファイルを.less,そして、インポートされたファイルのサフィックスに注目し、スタイルが有効かどうかをテストする。
  

オンデマンド・ローディングの有効化

• babel-plugin-importのインストール webpack.config.jsの修正

   {
   test: /\.(js|mjs|jsx|ts|tsx)$/,
   include: paths.appSrc,
   loader: require.resolve('babel-loader'),
   options: {
   customize: require.resolve(
   'babel-preset-react-app/webpack-overrides'
   ),
   plugins: [
   [
   require.resolve('babel-plugin-named-asset-import'),
   {
   loaderMap: {
   svg: {
   ReactComponent:
   '@svgr/webpack?-svgo,+titleProp,+ref![path]',
   },
   },
   },
   ],
   // コードの追加を開始する
   [
   require.resolve('babel-plugin-import'),
   {
   libraryName: 'antd',
   libraryDirectory: 'es',
   style: true,
   },
   ],
   // コードの終わり
   ],
   
   
   // This is a feature of `babel-loader` for webpack (not Babel itself).
   // It enables caching results in ./node_modules/.cache/babel-loader/
   // directory for faster rebuilds.
   cacheDirectory: true,
   // See #6846 for context on why cacheCompression is disabled
   cacheCompression: false,
   compact: isEnvProduction,
   },
   },
  

• スタイルの変更

   if (preProcessor) {
   loaders.push(
   {
   loader: require.resolve('resolve-url-loader'),
   options: {
   sourceMap: isEnvProduction && shouldUseSourceMap,
   },
   },
   {
   loader: require.resolve(preProcessor),
   options: {
   sourceMap: true,
   },
   }
   );
   }
   // 新しく追加したコード
   if (preProcessor && preProcessor === 'less-loader') {
   loaders.push(
   {
   loader: require.resolve('resolve-url-loader'),
   options: {
   sourceMap: isEnvProduction && shouldUseSourceMap
   }
   },
   {
   loader: require.resolve(preProcessor),
   options: {
   sourceMap: true,
   appendData: () => {
   return '@primary-color: #ff4757;'
   },
   lessOptions: {
   javascriptEnabled: true,
   }
   }
   }
   );
   }
  

これにより、antdはオンデマンドでロードし、テーマをカスタマイズすることができます。