关于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 不能出现任何注释；
  • 此时配置完成，可以正常使用了，但会出现一些警告信息

image.png

`暂时不知道如何解决`

---

- 当你想要加载 antd 中的 less 文件时，即将 style 的值改为 true 时， 重新启动项目会出现错误：编译失败

image.png

解决方法：

此时需要在你配置less-loader的地方， 添加一个 options 项，即修改为以下内容

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

之后重新启动项目即可；
所有修改Webpack配置文件的操作， 必须重启项目， 否则可能无法生效