Description

Distribute ant configurations to multiple product teams.

Install

npm i pioner-ant-json-config

yarn add pioner-ant-json-config

Usage

With craco

https://github.com/FormAPI/craco-antd

craco.config.js:

const CracoAntDesignPlugin = require("craco-antd");
const themeVariables = require('pioner-ant-json-config');

module.exports = {
  plugins: [
    {
      plugin: CracoAntDesignPlugin,
      options: {
        customizeTheme: themeVariables
      }
    }
  ]
};

With react-app-rewire typescript

Follow advanced guide at: https://ant.design/docs/react/use-in-typescript

config-overrides.js:

const tsImportPluginFactory = require('ts-import-plugin')
const { getLoader, injectBabelPlugin } = require("react-app-rewired");
const rewireLess = require('react-app-rewire-less');
const themeVariables = require('pioner-ant-json-config');


module.exports = function override(config, env) {

    const tsLoader = getLoader(
      config.module.rules,
      rule =>
        rule.loader &&
        typeof rule.loader === 'string' &&
        rule.loader.includes('ts-loader')
    );
  
    tsLoader.options = {
      getCustomTransformers: () => ({
        before: [ tsImportPluginFactory({
          libraryDirectory: 'es',
          libraryName: 'antd',
          style: true,
        }) ]
      })
    };

    config = rewireLess.withLoaderOptions({
        javascriptEnabled: true,
        modifyVars: themeVariables,
    })(config, env);
  
    return config;
  }

With CRA eject

Basically follow this: https://medium.com/@GeoffMiller/how-to-customize-ant-design-with-react-webpack-the-missing-guide-c6430f2db10f, just switch themeVariables to correct source in webpack config. Also set javascriptEnabled: true in less-loader.

License

MIT