React-antd的按需引入+自定主题

React-antd的按需引入+自定主题

我们需要对 create-react-app 的默认配置进行自定义，这里我们使用 react-app-rewired （一个对 create-react-app 进行自定义配置的社区解决方案）。

引入 react-app-rewired 并修改 package.json 里的启动配置。由于新的 react-app-rewired@2.x 版本的关系，你还需要安装 customize-cra。

1.安装依赖：yarn add react-app-rewired customize-cra babel-plugin-import less less-loader
2.修改package.json
    ....
        "scripts": {
                "start": "react-app-rewired start",
                "build": "react-app-rewired build",
                "test": "react-app-rewired test",
                "eject": "react-scripts eject"
        },
    ....
3.根目录下创建config-overrides.js
//配置具体的修改规则
        const { override, fixBabelImports,addLessLoader} = require('customize-cra');
        module.exports = override(
                fixBabelImports('import', {
                        libraryName: 'antd',
                        libraryDirectory: 'es',
                        style: true,
                }),
                addLessLoader({
                        lessOptions:{
                                javascriptEnabled: true,
                                modifyVars: { '@primary-color': 'green' },
                        }
                }),
        );
4.备注：不用在组件里亲自引入样式了，即：import 'antd/dist/antd.css'应该删掉