React配置less和antd

版本
“less”: “^4.0.0”,
“less-loader”: “^7.2.0”,
“react”: “^17.0.1”,
“babel-plugin-import”: “^1.13.3”

若是不需要修改别的仅仅支持less编译，不需要暴露配置

1. 安装依赖

yarn add react-app-rewired babel-plugin-import less less-loader style-loader css-loader customize-cra

2. 配置启动项

3. 创建 config-overrides.js 文件，跟package.json同级目录

const {
    
    
    override, 
    fixBabelImports, 
    addLessLoader, 
    addWebpackAlias} = require('customize-cra');
  const path = require("path");
  
  module.exports = function override(config, env) {
    
    
      return config;
  };
  module.exports = override(
      fixBabelImports('import', {
    
    
          libraryName: 'antd',
          style: "css"
      }),
      //使用less-loader对源码重的less的变量进行设置antd自定义主题
      addLessLoader({
    
    
          lessOptions: {
    
    
            javascriptEnabled: true,
            modifyVars: {
    
    
                "@primary-color": "#1890ff",
            }
          }
      }),
      //增加路径别名的处理
      addWebpackAlias({
    
    
          '@': path.resolve('./src')
      })
  );

通过以上步骤就可以编译运行less文件了
以下是仅支持less后缀，但并不能编译通过

4. 暴露webpack配置

yarn eject

如果报错，先用git提交一下

git add .
git commit -m “init”

5. 支持less

对 webpack.config.js 进行修改
修改正则匹配的语法，蓝框中

6. antd按需加载组件
   安装 babel-plugin-import

yarn add babel-plugin-import

对 package.json 进行修改

添加plugins的语句

"plugins": [
  [
    "import",
    {
    
    
      "libraryName": "antd",
      "style": "css"
    }
  ]
]