脚本宝典收集整理的这篇文章主要介绍了

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

clipboard.png

`暂时不知道如何解决`

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

clipboard.png

解决方法:

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


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

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

总结

以上是脚本宝典为你收集整理的

关于React集成less和antd遇到的问题及解决方式

全部内容,希望文章能够帮你解决

关于React集成less和antd遇到的问题及解决方式

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过