react 按需加载antd+配置antd主题

> 环境

> 按需加载

> 配置主题

`` 环境

• create-react-app 3.0+
• antd ^3.23.6
• npm run eject或yarn eject暴露配置
• less ^3.10.3
• less-loader ^5.0.0

`` 按需加载

1.antd官网的定制主题是在create-react-app没有npm run eject以前配置的

2.安装依赖yarn add babel-plugin-import 或 npm install babel-plugin-import

3.在webpack.config.js添加lessRegex、lessModuleRegex,同sass配置一致

4.完整版的按需加载配置

"babel": {
    "plugins": [
      [
        "import",
        {
          "libraryName": "antd",
          "libraryDirectory": "es",
          "style": "css"
        }
      ]
    ],
    "presets": [
      "react-app"
    ]
}
复制代码

`` 配置主题

1.首先必须将package.json中的babel项配置中的style属性值改成true,由于值是css时按需加载时加载的就是antd编译后以后的css文件，要更改主题颜色是要更改less变量的，而true标识是直接加载antd的less文件

"plugins": [
  [
    "import",
    {
      ...
      "style": true
    }
  ]
]
复制代码

2.修改webpack.config.js，大概在110~120行左右，我这里有多个loader，就直接一块儿贴了，有多个loader的朋友就能直接使用了。完整版变量

//添加主题变量
const modifyVars = {
   "primary-color": "red",
   "link-color": "red"
}

if (preProcessor) {
    let loader = {
        loader: require.resolve(preProcessor),
        options: {
            sourceMap: isEnvProduction && shouldUseSourceMap,
        },
    }
    if (preProcessor === "less-loader") {
        loader.options.modifyVars = modifyVars
        loader.options.javascriptEnabled = true
    }
    loaders.push(
        {
            loader: require.resolve('resolve-url-loader'),
            options: {
                sourceMap: isEnvProduction && shouldUseSourceMap,
            },
        },
        loader
    );
}
复制代码

3.重启项目，搞定，告辞。