create-react-app eject之后 修改antd主题样式

项目架构

create-react-app + antd

修改antd主题样式

方式一

在没有npm run eject暴露webpack的配置的情况下,我们可以通过官方文档上的在 create-react-app 中更改主题的方式进行配置吗,地址如下:

ant.design/docs/react/…

方式二

当我们通过npm run eject暴露webpack的配置之后,config-overrides.js这个文件的自定义配置就已经失效了,这个时候,只能通过修改/config/webpack.config.js里的配置来实现自定义主题了,那么我们就开始吧

步骤

• 更新package.json文件配置style的部分

"babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "import",
        {
          "libraryName": "antd",
          "libraryDirectory": "es",
          "style": true //默认是'css',意思是默认引用主题库里的css文件,改为true是加载组件库中的less文件
        }
      ]
    ]
  }

• /config/webpack.config.js下设置好less的配置，这里，！一定要配置less:

//大概在66行,定义less变量
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

//大概在522行,添加less配置
{
  test: lessRegex,
  exclude: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 2,
      sourceMap: isEnvProduction && shouldUseSourceMap
    },
    'less-loader'
  ),
  sideEffects: true
},
{
  test: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 2,
      sourceMap: isEnvProduction && shouldUseSourceMap,
      modules: true,
      getLocalIdent: getCSSModuleLocalIdent
    },
    'less-loader'
  )
}

//添加好配置,大概在144行,修改主题配置
if (preProcessor === "less-loader") {
    loader.options.modifyVars = {
      'primary-color': '#2F54EB',
      'link-color': '#2F54EB',
      'font-size-base': '14px',
      'box-shadow-base': '0px 4px 4px rgba(0, 0, 0, 0.1)'
    }
    loader.options.javascriptEnabled = true
  }
  loaders.push(loader);
  //   loaders.push(
  //     {
  //       loader  : require.resolve('resolve-url-loader'),
  //       options : {
  //         sourceMap : isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
  //         root      : paths.appSrc,
  //       },
  //     },
  //     {
  //       loader  : require.resolve(preProcessor),
  //       options : {
  //         sourceMap : true,
  //       },
  //     }
  //   );
}

最后重新编译一下,就可以看到效果啦!