react eject后antd如何定制主题

官网只介绍了没有eject的方法，用craco来配置，但是eject后，script脚本就变了craco再改脚本就不行了， 官网地址： 所以探索了一下如何自定义主题 、，重点是参考2

需要配置less，yarn add less less-loader -D 然后在webpack.config.js里面添加如下

const lessRegex = /.(css|less)$/;
const lessModuleRegex = /.module.(css|less)$/

后面加这个

// less
            {
          
   
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders(
                {
          
   
                  importLoaders: 3,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                  modules: {
          
   
                    mode: icss
                  }
                },
                less-loader
              ),
              sideEffects: true
            },
            {
          
   
              test: lessModuleRegex,
              use: getStyleLoaders(
                {
          
   
                  importLoaders: 3,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                  modules: {
          
   
                    mode: local,
                    getLocalIdent: getCSSModuleLocalIdent
                  }
                },
                less-loader
              )
            },

然后在getStyleLoaders函数中添加如下

if (preProcessor) {
          
   
      loaders.push(
        {
          
   
          loader: require.resolve(resolve-url-loader),
          options: {
          
   
            sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
            root: paths.appSrc
          }
        },
        {
          
   
          loader: require.resolve(preProcessor),
          options: {
          
   
            sourceMap: true,
            // 配置craco，因为eject暴露了之后就不能直接用craco.config.js
            lessOptions: preProcessor === less-loader ? {
          
   
              modifyVars: {
          
   //这里就是craco.config.js中的自定义主题内容了
                @primary-color: rgb(0,82,204),
                // 不加@符号也行
                // primary-color: rgb(0,82,204),
                @font-size-base: 16px
              },
              javascriptEnabled: true,
            } : null
          }
        }
      )
    }

然后在package.json中添加

"babel": {
          
   
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "import",
        {
          
   
          "libraryName": "antd",
          "libraryDirectory": "es",
          "style": "true"
        }
      ]
    ]
  }

然后yarn add babel-plugin-import，然后在index.tsx中引入如下文件

import ../node_modules/antd/dist/antd.less
// import antd/dist/antd.less

我配置了tsconfig的baseUrl，所以无法直接引入antd/dist/antd.less，就用了绝对路径

这个问题可以参考一下，不过我暂时没解决