ant design按需加载组件和样式

1. 增加组件

$ yarn add react-app-rewired customize-cra

2. 修改package.json

/* package.json */
"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test",
+   "test": "react-app-rewired test",
}

3. 添加按需加载组件

$ yarn add babel-plugin-import

4. 添加config-overrides.js

const { override, fixBabelImports ,addLessLoader} = require('customize-cra'); 

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
  }),
  addLessLoader({        
    javascriptEnabled: true,  
    modifyVars: { 
        '@primary-color': '#1DA57A' 
    }    
  })
);

customize-cra@2.x以下版本

const { injectBabelPlugin } = require('react-app-rewired');
const rewireLess = require('react-app-rewire-less');

module.exports = function override(config, env) {
  config = injectBabelPlugin(
    ['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }], // change importing css to less
    config,
  );
  config = rewireLess.withLoaderOptions({
    modifyVars: { "@primary-color": "#1DA57A" },
    javascriptEnabled: true,
  })(config, env);
  return config;
};