配置react支持less，babel-plugin-import按需加載antd

原文：https://blog.csdn.net/lvanboy/article/details/88200433

安裝基礎插件：react-router，axios，less-loader ,AntD（UI框架，基於react封裝），暴露webpack配置，修改less-loader。

Create-react-app腳手架創建的項目默認是不支持less語法，但AntD UI 框架是基於Less編寫的，爲了定製主題，修改less源碼文件，讓這個框架能夠正常使用，需要暴露webpack，修改webpack配置，使其支持AntD的使用。

通過命令yarn eject，暴露出webpack文件

在config->webpack.config.js中添加，對照sass變量的定義，寫less



配置完成保存，安裝yarn add less，重新啓動項目yarn start
接下來，安裝antd

安裝完成後，引入組件，引入相關樣式（使用再自定義的react的組件中的）

爲了提升性能，安裝babel-plugin-import，實現按需加載的功能，即項目中用到什麼樣的組件，就引入對應的css


在package.json文件中相應位置配置plugins:

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

配置完成後，則不需要再引入這句代碼，配置文件將自動引用相關antd的樣式，從less文件轉成css樣式，作爲行內樣式插入元素中。重啓項目，如果發生錯誤，檢查less版本，，如果大於3.0版本，重新安裝less並且版本小於3.0.0

重啓項目，yarn start