create-react-app eject以后的修改antd主题配置

create-react-app + antd 的搭配，换肤设置

本文采用的结构是 create-react-app + antd 的主题修改方式。

antd的官网上有介绍如何修改主题，定制主题的配置，可是是在没有作npm run eject的基础上。须要请移步：ant.design/docs/react/…

然而如今使用基本脚手架开发的咱们，听说create-react-app这个脚手架是目前最轻量级好用的脚手架了，它自己的配置已经足够知足了咱们全部的开发使用。

可是开发同窗们依旧会经过npm run eject来暴露webpack的配置，给自定义配置留有余地。

有些配置在eject先后有那么一点不同～～～

献上github地址：点击

能够愉快的添加配置了
脚手架的基础配置完成以后，即继 less、babel 配置以后：

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

// 大概40行的位置，定义less变量
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

//大概440几行的位置，添加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'
  )
}

复制代码

• 添加好less配置以后，能够添加主题修改配置了：

// 大概115行的位置
if (preProcessor) {
  let loader = {
    loader: require.resolve(preProcessor),
    options: {
      sourceMap: isEnvProduction && shouldUseSourceMap,
    },
  }
  if (preProcessor === "less-loader") {
    loader.options.modifyVars = {
      'primary-color' : '#1DA57A',
      // 'btn-primary-bg': '#FF2A8E',
      // 'btn-default-bg': '#6236FF',
      // 'menu-dark-bg':'linear-gradient(#64687D,#3D415A)',
      // 'menu-dark-submenu-bg':'#fff',
    }
    loader.options.javascriptEnabled = true
  }
  loaders.push(loader);
}
复制代码