javascript - 让 ant.design.pro 与 create-react-app-ts 一起工作 - 导入较少的问题

Question

我正在尝试让 ant.design.pro 与我的 typescript react 应用程序一起工作，我一切正常，但没有加载较少的文件。

它们适用于常规的 Ant 组件。

查看 ant design pro 项目，他们在 plugin.config.js 中执行以下操作：

// Change theme plugin

import MergeLessPlugin from 'antd-pro-merge-less';
import AntDesignThemePlugin from 'antd-pro-theme-webpack-plugin';
import path from 'path';

export default config => {
  // 将所有 less 合并为一个供 themePlugin使用
  const outFile = path.join(__dirname, '../.temp/ant-design-pro.less');
  const stylesDir = path.join(__dirname, '../src/');

  config.plugin('merge-less').use(MergeLessPlugin, [
    {
      stylesDir,
      outFile,
    },
  ]);

  config.plugin('ant-design-theme').use(AntDesignThemePlugin, [
    {
      antDir: path.join(__dirname, '../node_modules/antd'),
      stylesDir,
      varFile: path.join(__dirname, '../node_modules/antd/lib/style/themes/default.less'),
      mainLessFile: outFile, //     themeVariables: ['@primary-color'],
      indexFileName: 'index.html',
    },
  ]);
};

我认为我需要，我试图在 react-rewired config-overrides.js 中模仿这一点，但无济于事，因为 config.plugin 不是函数：

const MergeLessPlugin = require('antd-pro-merge-less');
const AntDesignThemePlugin = require('antd-pro-theme-webpack-plugin');
const path =require('path');

const webpackplugin = require('./plugin.config');

module.exports = function override(config, env) {
    config.plugin('merge-less').use(MergeLessPlugin, [{
        stylesDir,
        outFile,
    }, ]);

    config.plugin('ant-design-theme').use(AntDesignThemePlugin, [{
        antDir: path.join(__dirname, '../node_modules/antd'),
        stylesDir,
        varFile: path.join(__dirname, '../node_modules/antd/lib/style/themes/default.less'),
        mainLessFile: outFile, //     themeVariables: ['@primary-color'],
        indexFileName: 'index.html',
    }, ]);
}

任何人有任何想法如何做到这一点？

标签： javascriptreactjstypescriptwebpackantd