在使用vue+webpack模版创建的项目中使用font-awesome

栏目: 编程工具 · 发布时间: 7年前

内容简介:前言:最近使用vue+webpack进行一个小项目的开发,按照官方模版文档完成项目初始化后打算引入ont-awesome字体图标库进行使用,引入过程中遇到一些问题并解决,现记录如下。一开始进展很顺利,百度了基本用法后安装:然后在main.js中引入:

前言:最近使用vue+webpack进行一个小项目的开发,按照官方模版文档完成项目初始化后打算引入ont-awesome字体图标库进行使用,引入过程中遇到一些问题并解决,现记录如下。

一开始进展很顺利,百度了基本用法后安装:

npm install font-awesome –save

然后在main.js中引入:

import ‘font-awesome/css/font-awesome.css’

接下来就开始愉快的使用各种图标了:

<i class="fa fa-search"></i>
<i class="fa fa-star"></i>

npm run dev 之后效果也如预期般顺利,这样的:

在使用vue+webpack模版创建的项目中使用font-awesome

然而,当我npm run build后生成dist文件夹,并部署之后发现情况改变了!

在使用vue+webpack模版创建的项目中使用font-awesome

图标不见了!!

经过一些调试之后发现是webpack打包之后生成的css文件对字体的引用路径有问题:url(static/fonts/…)应该是url(../static/fonts/…)这样才能正常。

在使用vue+webpack模版创建的项目中使用font-awesome

于是继续问伟大的度娘!

找到了一篇文章中午看到了曙光了( 原文连接 ),正确的步骤应该如下:

1.安装依赖包

npm install font-awesome-loader less less-loader css-loader style-loader file-loader font-awesome -save

2.配置font-awesome-loader

打开项目目录build/webpack.base.conf配置font-awesome-loader如下:

在使用vue+webpack模版创建的项目中使用font-awesome

开始运行npm run build,有一个错误来的措手不及!

在使用vue+webpack模版创建的项目中使用font-awesome

还好,根据错误提示运行安装一下node-sass,所以:

3.安装node-sass

npm install node-sass@latest

此时,再执行npm run build时终于看见梦寐以求的效果,打包成功了。部署后运行也成了。

在使用vue+webpack模版创建的项目中使用font-awesome

至此,可以随意使用font-awesome图标库了!


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

图论算法理论、实现及应用

图论算法理论、实现及应用

王桂平//王衍//任嘉辰 / 北京大学 / 2011-1 / 54.00元

《图论算法理论、实现及应用》系统地介绍了图论算法理论,并选取经典的ACM/ICPC竞赛题目为例题阐述图论算法思想,侧重于图论算法的程序实现及应用。《图论算法理论、实现及应用》第1章介绍图的基本概念和图的两种存储表示方法:邻接矩阵和邻接表,第2~9章分别讨论图的遍历与活动网络问题,树与图的生成树,最短路径问题,可行遍性问题,网络流问题,支配集、覆盖集、独立集与匹配,图的连通性问题,平面图及图的着色问......一起来看看 《图论算法理论、实现及应用》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

在线进制转换器
在线进制转换器

各进制数互转换器

html转js在线工具
html转js在线工具

html转js在线工具