首先，我们安装react-app-rewired。
yarn add react-app-rewired
然后修改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",
}
接着，安装customize-cra
$ yarn add customize-cra
然后在根目录下添加config-overrides.js文件。
module.exports =function override(config, env) {
// 关于webpack的相关配置return config;
};
好了，基本的操作就是这样。下面我们再来说具体到我们的项目中，需要做的一些配置。
react项目中我们最常用的组件库antd，我们需要配置按需加载。
使用babel-plugin-import，它是一个用于按需加载组件代码和样式的 babel 插件。
安装
$ yarn add babel-plugin-import
接着配置webpack
/* config-overrides.js */
+ const { override, fixBabelImports } = require('customize-cra');
- module.exports = function override(config, env) {
- return config;
- };
+ module.exports = override(
+ fixBabelImports('import', {
+ libraryName: 'antd',
+ libraryDirectory: 'es',
+ style: 'css',
+ }),
+ );
这样我们在组件中就可以按需引入组件库中所需要的组件了。
2、自定义主题
按照配置主题的要求，自定义主题需要用到 less 变量覆盖功能。
安装less和less-loader
$ yarn add less less-loader
配置webpack
/* config-overrides.js */
- const { override, fixBabelImports } = require('customize-cra');
+ const { override, fixBabelImports, addLessLoader } = require('customize-cra');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
- style: 'css',
+ style: true,
}),
+ addLessLoader({
+ javascriptEnabled: true,
+ modifyVars: { '@primary-color': '#1DA57A' },
+ }),
);
这里利用了less-loader的modifyVars来进行主题配置。当然这里的modifyVars的值也可以是一个theme文件
