牛骨文教育服务平台(让学习变的简单)
博文笔记

antd icon离线无法显示 和引入官方库后覆盖原样式问题

创建时间:2017-10-27 投稿人: 浏览次数:762

项目使用antd 来做界面在进入内网开发的时候出现了,icon离线无法显示的问题。网上找了方法并通过官网例子解决了该问题,但出现了默认样式覆盖的问题。因为项目原样式改动多,后来找到了解决方法.


1.引入官方图标库。

  在官网下载解压名为iconfont-2.10.x的压缩包,解压后删除含有demo字段的例子。将余下的6个文件名含有iconfont字段的文件复制到node_modulesantddist下新建的iconfont文件夹下。

2,修改.less文件

在项目的css入口文件对面的.less文件加入下面2句(我的是在app/static/css/common.less).不同项目有不同

@import "~antd/dist/antd1.less";
@icon-url: "~antd/dist/iconfont/iconfont";
注意顺序。第一句中引入的antd1.less是对antd.less复制后做了一些修改的文件,在同目录下。第二句是你所放置离线包的位置。

3.修改antd1.less

在node_modules/antd/dist下复制antd.less,重命名antd1.less粘贴到同目录下修改如下

@import "../lib/style/index.less";
//@import "../lib/style/components.less";
把第二句注释掉即可。因为第二句引入了很多antd默认的.less文件。在项目入口文件引入后因为优先级的问题后直接覆盖掉你之前自己重写的官方样式


声明:该文观点仅代表作者本人,牛骨文系教育信息发布平台,牛骨文仅提供信息存储空间服务。