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);
}
複製代碼