博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
react+webpack+wepack-dev-server的环境中ant design图标离线的方法
阅读量:6829 次
发布时间:2019-06-26

本文共 535 字,大约阅读时间需要 1 分钟。

1、首先说说我老姜对官方提供的demo的理解, 在理解的过程也学到了不少知识。

图0

上图(图0)展示的官网demo的目录结构,node_modules是自己用node下载的, iconfont中是自己的离线图标这里不赘述,里面demo.*的都可以删除,那是给的样例,关于webpack基本配置的文件的知识客官你去百度就好,custom中是对图标路径变量的重新赋值,注意顺序, index.less是对ant样式文件的引用和变量文件的引用,没错这个可以和变量文件合并,到这已经对图标访问实现本地化了,只要 在使用icon前引用index.less就可以了,看似简单的已经实现了, 不过小编自己在一个坑里爬了一天才出来,这个坑就是webpack-dev-server这个小型服务器,框架是公司的,也是一点点排查发现的问题, 原因是这个服务器配置中把所有的路径的访问都返回了index.html(图2),这样实现离线图标的时候控制台就报错(图1),原因很明显因为返回的是index.html, 解决方法是在过滤的时候加个判断把访问iconfont资源的排除掉,解决方法如图3

Failed to decode downloaded font: http://localhost:8888/iconfont/iconfont.woff :8888/#/login?_k=qr6etl:1 OTS parsing error: invalid version tag

webpack-dev-server

 

 解决方法

 

转载于:https://www.cnblogs.com/xizhenghe/p/7879391.html

你可能感兴趣的文章
MySql的一些基本使用及操作命令 (待更新)
查看>>
题目4:棋盘寻宝扩展
查看>>
对一些面试题的回答
查看>>
c# enum用法
查看>>
Struts2 中action之间的跳转(分享)
查看>>
HDU4707:Pet(DFS)
查看>>
html标签页图标
查看>>
C# list 新用法
查看>>
Android 获取控件相对于屏幕位置
查看>>
DNGuard Enterprise v2.80 released
查看>>
WPP
查看>>
C# GetSchema Get List of Table 获取数据库中所有的表名以及表中的纪录条数的方法
查看>>
PySide教程:“.NET研究”第一个PySide应用
查看>>
winrar自解压释放路径详解
查看>>
图像开运算+闭运算+腐蚀+膨胀
查看>>
poj-1324 Holedox Moving **** [转]
查看>>
深入foreach工作方式
查看>>
UIView 进行各种动画展示及其用法解释
查看>>
公布2012年5月赛CSDN算法达人赛试题及参考答案
查看>>
Mysql ON子句和USING子句
查看>>