zoukankan      html  css  js  c++  java
  • react+webpack+wepack-dev-server的环境中ant design图标离线的方法

    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

     解决方法

  • 相关阅读:
    关于接口测试的一些个人总结
    PMP学习考试回顾与心得
    RHCE第2课
    RHCE第1课
    kafka中对于zookeeper的理解和leader选举过程
    基于python的Selenium使用
    安装python第三方包的几种方式
    Vi命令下几种容易混淆的插入方式
    python单元测试框架unittest
    关于SQL子查询的一个问题
  • 原文地址:https://www.cnblogs.com/xizhenghe/p/7879391.html
Copyright © 2011-2022 走看看