Create-react-app+Antd+Less配置

说明

React官方脚手架工具Create-react-app 用于快速创建React应用，但依旧有局限性，我们根据项目需求需要对Create-react-app的配置进行修改。这里针对引入Antd的两种配置方式进行配置。

方案

React-app-rewired（一个对 create-react-app 进行自定义配置的社区解决方案）。 
1. 安装react-app-rewired

npm install –save-dev react-app-rewired

1. 修改package.json启动项

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

1. 在项目根目录创建一个 config-overrides.js 用于修改默认配置。

module.exports = function override(config, env) {
  // do stuff with the webpack config...
  return config;
};

1. 使用babel-plugin-import实现Antd按需加载，修改config-overrides.js 
   

   npm install –save-dev babel-plugin-import

/* config-overrides.js */
const { injectBabelPlugin } = require('react-app-rewired');
module.exports = function override(config, env) {
    config = injectBabelPlugin(['import', { libraryName: 'antd', style: 'css'}], config);
    return config;
};

5.使用react-app-rewire-less配置Less

npm install - -save-dev react-app-rewire-less

/* config-overrides.js */
const { injectBabelPlugin } = require('react-app-rewired');
const rewireLess = require('react-app-rewire-less');

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

地址  https://github.com/junwei1114/react-     欢迎start  Thanks♪(･ω･)ﾉ