antd 按需引入样式（3.x）报错问题 以及 自定义主题

1. antd自定义主题官网要求安装如下几个依赖包,这里统一安装

npm i react-app-rewired customize-cra babel-plugin-import less less-loader

2. 修改 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",
}

3. 根目录创建 / == config-overrides.js 修改后要重启项目==

const { override, fixBabelImports,addLessLoader } = require('customize-cra');
 
module.exports = override(
    // 这里是antd样式按需引入,注释了index里import 'antd/dist/antd.css'样式依然生效，表明按需引入成功
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    // style: 'css',
    style: true, 
  }),
    // 自定义主题颜色配置 将style改成true
    addLessLoader({
        // lessOptions: {  // 报错加上这个对象
            javascriptEnabled: true,
            modifyVars: { '@primary-color': '#f40' }, // 主题颜色f40
        //   }
    }),
);

在这个过程中报错了，导致npm start 无法启动 如下图

查了一些资料写的步骤太复杂,然后我删除了node_moudles文件 并重新安装，又报了如下的错

• 发现 webpack -v 我的版本是4.44.2 然后 直接本地安装:npm install webpack --save-dev@4.44.2
• 最后更新node_modules文件夹:npm install

最后又报了一个Cannot find module 'less-loader' 指定一下less-loader版本就好了

npm i less-loader@4.1.0

这里用的是antd3.x，4.x使用@craco/craco进行配置antd官网

4.x没看见按需引入，可能还延续3.x版本的方式

 npm i  @craco/craco craco-less
 @craco/craco 一个对 create-react-app 进行自定义配置的社区解决方案
 craco-less   引入 craco-less 来帮助加载 less 样式和修改变量。

新建App.less 引入antd样式@import '~antd/dist/antd.less';

App.js引入import './App.less';

最后新建craco.config.js

const CracoLessPlugin = require('craco-less');
module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { '@primary-color': 'orange' },
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};