[JavaScript知识库]react eject后antd如何定制主题

官网只介绍了没有eject的方法，用craco来配置，但是eject后，script脚本就变了craco再改脚本就不行了，
官网地址：https://ant.design/docs/react/use-with-create-react-app-cn

所以探索了一下如何自定义主题
参考1、参考2，重点是参考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，就用了绝对路径

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

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖