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

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

内容简介：前言：最近使用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 之后效果也如预期般顺利，这样的：

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

图标不见了！！

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

于是继续问伟大的度娘！

找到了一篇文章中午看到了曙光了（原文连接），正确的步骤应该如下：

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如下：

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

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

3.安装node-sass

npm install node-sass@latest

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

至此，可以随意使用font-awesome图标库了！

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

查看所有标签

猜你喜欢:

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

码农书籍

HTML5权威指南

[美] Adam Freeman / 谢廷晟、牛化成、刘美英 / 人民邮电出版社 / 2014-1 / 129.00元

《HTML5 权威指南》是系统学习网页设计的权威参考图书。本书分为五部分：第一部分介绍学习本书的预备知识和HTML、CSS 和JavaScript 的最新进展；第二部分讨论HTML 元素，并详细说明了HTML5中新增和修改的元素；第三部分阐述CSS，涵盖了所有控制内容样式的CSS 选择器和属性，并辅以大量代码示例和图示；第四部分介绍DOM，剖析如何用JavaScript 操纵HTML 内容；第五部......一起来看看《HTML5权威指南》这本书的介绍吧!

码农工具