react项目通过customize-cra进行ant主题色的修改 webpack的配置

1 我们可以运行命令 yarn run eject / npm run eject 暴露脚手架的webpack配置, 然后进行配置
2 我们也可以在不暴露的情况下进行配置，将我们的配置最终也能合并到脚手架配置中

步骤

1 下载 yarn add customize-cra react-app-rewired -D 或者 npm i customize-cra react-app-rewired -D
2 修改项目启动命令：
 "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
4 在文件下写你的配置代码，这些代码最终会被合并到脚手架的webpack中

配置

// config-overrides.js

// customize-cra中可以结构很多方法用于不同的配置
const { override, fixBabelImports, addWebpackAlias, addLessLoader } = require("customize-cra");
const path = require("path");

module.exports = override(

  // 按需引入ant
  fixBabelImports("import", {
    libraryName: "antd",
    libraryDirectory: 'es',
    style: true, // 只有这里为true修改主题色才生效!!!
  }),

  // 设置路径别名
  addWebpackAlias({
    "@": path.resolve(__dirname, "src"),
  }),

  // 修改ant主题色 因为ant中的样式是用less编写的所以我们需要安装less less-loader进行解析
  addLessLoader({
    lessOptions: {
      javascriptEnabled: true,
      modifyVars: { "primary-color": "#CCA65F" },
    }
  }),
);

包的版本

"babel-plugin-import": "^1.13.3",
"customize-cra": "^1.0.0",
"less": "^4.1.1",
"less-loader": "7.1.0",
"react-app-rewired": "^2.1.8"