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

上图（图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

react+webpack+wepack-dev-server的环境中ant design图标离线的方法的更多相关文章

  1. webpack 4 & dev server

    webpack 4 & dev server proxy https://webpack.js.org/configuration/dev-server/#devserverproxy htt ...

  2. 如何在Windows Server 2008 R2中更改桌面图标

    如何在Windows Server 2008 R2中更改桌面图标 Windows Server 2008 R2 已经在 MSDN 和 TechNet Plus 订阅上公布,gOxiA 在第一时间下载并 ...

  3. 使用Facebook的create-react-app脚手架快速构建React开发环境（ant.design，redux......）

    编程领域中的“脚手架(Scaffolding)”指的是能够快速搭建项目“骨架”的一类工具.例如大多数的React项目都有src,public,webpack配置文件等等,而src目录中又包含compo ...

  4. es6环境中，export与import使用方法

    前言 参考自阮一峰大神的教程:http://es6.ruanyifeng.com/?search=export&x=6&y=5#docs/module#export-命令 声明:如有问 ...

  5. Mac OS X中Launchpad的图标添加删除方法（添加方法别试了，和Linux很大区别）

    说明:在Mac下的Launchpad图标添加和删除都与应用程序的app文件有关,如果单纯的只想在Launchpad添加自定义的图标,然后指定要某条命令运行时,建议不要这么干,Launchpad的图标管 ...

  6. 在 SharePoint Server 2016 本地环境中设置 OneDrive for Business

    建议补丁 建议在sharepoint2016打上KB3127940补丁,补丁下载地址 https://support.microsoft.com/zh-cn/kb/3127940 当然不打,也可以用O ...

  7. 利用webpack搭建的前端工程化环境

    随着webpack3.x的发布,其功能也越来越强大,很多的项目的编译打包工具也由gulp逐渐转移到webpack.最近因为项目重构考虑使用使用vue,同时想从原来的gulp切换到webpack,所以搭 ...

  8. （二）React Ant Design Pro + .Net5 WebApi：前端环境搭建

    首先,你需要先装一个Nodejs,这是基础哦.如果没有这方面知识的小伙伴可以在园子里搜索cnpm yarn等关键字,内容繁多,此不赘述,参考链接 一. 简介 1. Ant Design Pro v5 ...

  9. 在搭建tesseract-OCR环境中遇到问题和反省

    Tesseract,一款由HP实验室开发由Google维护的开源OCR(Optical Character Recognition , 光学字符识别)引擎,特点是开源,免费,支持多语言,多平台. 在搭 ...

随机推荐

  1. CCF 201709-1打酱油

    问题描述 小明带着N元钱去买酱油.酱油10块钱一瓶,商家进行促销,每买3瓶送1瓶,或者每买5瓶送2瓶.请问小明最多可以得到多少瓶酱油. 输入格式 输入的第一行包含一个整数N,表示小明可用于买酱油的钱数 ...

  2. 学习JavaSE 数组

    一维数组 基本概念 1.数组中只允许放同一种类型(可以是父子关系). 2.数组即对象. 例: int[ ] arrs={0,1,2};//arrs即一个对象. 3.数组是定长的,不可以增加或者减少. ...

  3. jQuery----each()方法

    jquery中有隐式迭代,不需要我们再次对某些元素进行操作.但是如果涉及到不同元素有不同操作,需要进行each遍历.本文利用10个li设置不同的透明度的案例,对each方法进行说明. 语法: $(元素 ...

  4. IntelliJ IDEA 历史版本下载地址

    地址:https://confluence.jetbrains.com/display/IntelliJIDEA/Previous+IntelliJ+IDEA+Releases scala插件:htt ...

  5. PostgreSQL处理xml数据初步

    磨砺技术珠矶,践行数据之道,追求卓越价值回到上一级页面:PostgreSQL基础知识与基本操作索引页    回到顶级页面:PostgreSQL索引页[作者 高健@博客园  luckyjackgao@g ...

  6. 北京Uber优步司机奖励政策（4月25日）

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  7. python基础学习1-列表推导式和字典推导式

    #!/usr/bin/env python # -*- coding:utf-8 -*- #列表推导式 取得100内可以被2整除且不能被3整除的数字 a=[i for i in range(100) ...

  8. 【转载】COM 组件设计与应用（十八）——属性包

    原文:http://vckbase.com/index.php/wv/1265.html 一.前言 书接上回,本回着落在介绍属性包 IPersistPropertyBag 接口的实现方法和调用方式.属 ...

  9. [TJOI2015]概率论[卡特兰数]

    题意 \(n\) 个节点二叉树的叶子节点的期望个数. \(n\leq 10^9\) . 分析 实际询问可以转化为 \(n\) 个点的不同形态的二叉树的叶子节点总数. 定义 \(f_n\) 表示 \(n ...

  10. Object C学习笔记11-数组

    在Object C也提供了类似C#中的Array数组对象,在Object C中使用NSArray 来创建数组:但是在Object C中NSArray 只能存放对象类型的指针,不能存放int,char, ...