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

发布时间:2019-07-02 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了关于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 不能出现任何注释;
- 此时配置完成,可以正常使用了,但会出现一些警告信息 

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

`暂时不知道如何解决`

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

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

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

```javascript
{
    loader: require.resolve('less-loader'),
    options: {
      javascriptEnabled: true,
    }
},
```
之后重新启动项目即可;
所有修改Webpack配置文件的操作, 必须重启项目, 否则可能无法生效

脚本宝典总结

以上是脚本宝典为你收集整理的关于React集成less和antd遇到的问题及解决方式全部内容,希望文章能够帮你解决关于React集成less和antd遇到的问题及解决方式所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。