脚本宝典收集整理的这篇文章主要介绍了关于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配置文件的操作, 必须重启项目, 否则可能无法生效
以上是脚本宝典为你收集整理的关于React集成less和antd遇到的问题及解决方式全部内容,希望文章能够帮你解决关于React集成less和antd遇到的问题及解决方式所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。