關於React集成less和antd遇到的問題及解決方式

react項目集成less

• 添加相關依賴

yarn add less less-loader -D

• 暴露react項目的相關配置

yarn eject

• 找到 Webpack的配置文件， 添加 less 解析器 less-loader

{
    loader: require.resolve('less-loader'),
},

• 最後編寫測試用例， 使用 less 文件編寫樣式， 測試成功！

react項目集成antd

• 添加依賴文件

yarn add antd

• 設置按需加載

  • 安裝依賴

  yarn add babel-plugin-import

  • 在 package.json 文件末尾的 babel 節點下添加， 官網提供的代碼

  "plugins": [
      ["import", {
        "libraryName": "antd",
        "libraryDirectory": "es",
        "style": "css"
      }]
    ]

`注意：` package.json 不能出現任何註釋；
- 此時配置完成，能夠正常使用了，但會出現一些警告信息

`暫時不知道如何解決`

---

- 當你想要加載 antd 中的 less 文件時，即將 style 的值改成 true 時， 從新啓動項目會出現錯誤：編譯失敗

解決方法：

此時須要在你配置less-loader的地方， 添加一個 options 項，即修改成如下內容

```javascript
{
    loader: require.resolve('less-loader'),
    options: {
      javascriptEnabled: true,
    }
},
```

以後從新啓動項目便可；
全部修改Webpack配置文件的操做， 必須重啓項目， 不然可能沒法生效