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.重啓項目，搞定，告辭。