第一种方法[原创]:
想在网上找到的第二种方法,试验一下可以。但是我不想 失去按需加在css的功能,所以自己查看antd模块源码,终于被我找到 定义 字体和图表文件请求路径的位置。只需要替换 该路径为自己内网可访问的路径即可。我是放在本项目的主目录新建font目录下。
首先,把官网下载的字体文档 压缩包解压,里面demo** 的文件不需要,是个例子。
将其余的 iconfont开头的6个文件复制到自己项目下(可随意位置,和后面请求对应即可)
然后,到安装的.node_modules\antd\lib\style\themes目录下 default.less 文件,修改请求路径 大约在62行:我的修改为
http://localhost:8082/ds_monitor/访问项目的主目录
font 自己定义的存放字体图标的文件
iconfont 文件名称,其他代码会添加不同后缀获取不同文件
注意:我的antd使用的是默认主题,所以是default.less文件,如果你的 修改过antd的主题,则需要修改对应主题的less
-----------------------上面是一种方法-------------------------
第一种方法:网上找到的方法(可用,但感觉关闭按需加在不是最有解决办法)
讲你下载下来的官方提供的字体库解压后所有文件复制到node-默读les/antd/dist目录下
创建新的文件夹iconfont
在你项目生成的css入口文件对应的源码less文件开始添加如下两句话
我的是app.less [顺序重要]
此时编译后 访问 ,本地添加的字体图表库已经可以显示。但是原来模块发送的字体请求 还是抱错。
此时相当于你自己下载一个字体库,antd默认下载一个字体库(内网下载不成功)所有 重复下载。
解决办法:将bable-plugin-import插件的 按需引入css;样式功能关闭
找到开发项目主目录下的.babelrc 这是配置bable的文件,修改为style:false
25 MAY 2017 on
React
,
Ant-Design
http://www.imshuai.com/ant-design-offline-icon/
最近在使用React实现公司一套系统的前端。控件库,看中了蚂蚁金服的
Ant Design
。
脚手架使用的是React官方的
create-react-app
,创建完成后,引入了Ant Design。在我自己的笔记本调试的都很好,但放到公司的开发机器上,发现图标资源都无法加载。马上看了一下浏览器的资源请求情况,果然,Ant Design默认使用的是阿里的CDN。
公司是内网环境,显然是行不通的。官方文档果然给出了
本地部署的提示
。
研究了一番,发现主要是要覆盖
@icon-url
这个less变量,所以就要开启less支持。幸好官方在
自定义主题
一节,已经给出了create-react-app中如何实现主题less变量的覆盖;同理,在modifyVar节点增加
@icon-url
的覆盖,如下:
然后在
/public
目录增加
iconfront
目录,并将下载好的
Web Font文件
放到这个目录即可。 不过还是有几个细节要注意:
要同时修改
webpack.config.dev.js
和
webpack.config.prd.js
,保证测试环境和生产环境都生效。
iconfront
文件夹要放在
/public
目录,而不是
/src
目录。虽然调试环境两者都能生效,但生产环境后者是不生效的。
@icon-url
的值里面有双引号。
http://www.imshuai.com/ant-design-offline-icon/