antd自定义主题，报错：ValidationError: Invalid options object. Less Loader has been initialized usin...

• 实现组件的按需打包

下载依赖模块

npm install react-app-rewired customize-cra babel-plugin-import --save-dev

定义加载配置的 js 模块: config-overrides.js

const {override, fixBabelImports} = require('customize-cra');
module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: 'css',
    })
);

修改配置: package.json

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

直接在应用中使用 antd 组件

• 自定义 antd 主题

下载工具包

npm install less less-loader

修改 config-overrides.js

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': '#2daebf'
        }
    })
);

结果报错，报错内容如下：

通过查相关文档发现是less-loader更新后对于配置方式做了改变 https://www.npmjs.com/package/less-loader#lessoptions
修改如下：

const {override, fixBabelImports, addLessLoader} = require('customize-cra');

module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        // style: 'css',
        style: true
    }),
    addLessLoader({
        lessOptions: {
            javascriptEnabled: true,
            modifyVars: {
                '@primary-color': '#2daebf'
            }
        }
    })
);

问题得以解决