首先，我們安裝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) {

  // 關(guān)于webpack的相關(guān)配置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來進行主題配置。當(dāng)然這里的modifyVars的值也可以是一個theme文件