一 customize-cra 使用步骤

1.下载 customize-cra 和 react-app-rewired。

    npm install customize-cra react-app-rewired --dev

2.更改 package.json 中的 scripts 配置，如下所示。即用 react-app-rewired命令代替 react-scripts

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  }

3.在项目根目录下添加 config-overrides.js 文件

使用 Less，需要下载 less 和 less-loader。

npm install less less-loader --dev

以下配置不仅实现了 less-loader，还设置了 less 模块化语法 ， 但是只能是以 .module.less 的文件才能实现模块化。

const { override, addLessLoader } = require('customize-cra');
module.exports = override(
    addLessLoader({
        lessOptions: {
           javascriptEnabled: true,
           localIdentName: '[local]--[hash:base64:5]'
        }
    }),
);

添加别名，设置相对路径。

使用 customize-cra 中的 addWebpackAlias 模块来实现该功能。

const path = require('path');
module.exports = override(    
    addWebpackAlias({      
        '@': path.resolve(__dirname, "src"),  
    })
)

引入时直接

import containers from 'containers';

等同于

import containers from '"@/containers"';

引入 antd 样式文件，需要下载 babel-plugin-import

npm install babel-plugin-import --dev

在 react 项目中，经常使用 antd 作为组件库。在引入并使用了 antd 组件后，会发现样式没有生效。所以这时候就要单独引入 antd 的 css 样式文件，配置如下。

const { override, fixBabelImports} = require('customize-cra');
module.exports = override(
 // 在这里使用 customize-cra 里的一些函数来修改配置
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: 'css' //或者true, true代表运用less
  })
);

按照以上步骤配置好之后，重启项目，antd 样式生效。