在使用vue+webpack模版创建的项目中使用font-awesome
前言:最近使用vue+webpack进行一个小项目的开发,按照官方模版文档完成项目初始化后打算引入ont-awesome字体图标库进行使用,引入过程中遇到一些问题并解决,现记录如下。
一开始进展很顺利,百度了基本用法后安装:
npm install font-awesome –save
然后在main.js中引入:
import ‘font-awesome/css/font-awesome.css’
接下来就开始愉快的使用各种图标了:
1 |
<i class="fa fa-search"></i> |
npm run dev 之后效果也如预期般顺利,这样的:
然而,当我npm run build后生成dist文件夹,并部署之后发现情况改变了!
图标不见了!!
经过一些调试之后发现是webpack打包之后生成的css文件对字体的引用路径有问题:url(static/fonts/…)应该是url(../static/fonts/…)这样才能正常。大专栏 在使用vue+webpack模版创建的项目中使用font-awesome8e317f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""/>
于是继续问伟大的度娘!
找到了一篇文章中午看到了曙光了(原文连接),正确的步骤应该如下:
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图标库了!
在使用vue+webpack模版创建的项目中使用font-awesome的更多相关文章
- 【vue】如何在 Vue-cli 创建的项目中引入 iView
根据vue项目的搭建教程,以下记录如何在Vue-cli创建的项目中引入iView. 1)iView的安装,在项目下使用 npm 安装iView cnpm install iview --save ...
- 【vue】如何在 Vue-cli 创建的项目中引入iView
根据vue项目的搭建教程,一下记录下如何在Vue-cli创建的项目中引入iView. 1)安装iView,在项目下 cnpm install iview --save 2 ) 在 webpack ...
- vue-cli+webpack在生成的项目中使用bootstrap方法(二)
vue-cli+webpack在生成的项目中使用bootstrap方法(一)中,是通过手动下载bootstrap库,然后手动添加到src/assets中,显然是过程太多. 当然是可以更省力些,可以通过 ...
- 【VueJS】windows环境安装vue-cli及webpack并创建VueJS项目
1. 安装node.js, Node.js安装包及源码下载地址为:https://nodejs.org/en/download/. 这次node.js不是主角,默认已安装好了,通过npm –v查看no ...
- vue-cli+webpack在生成的项目中使用bootstrap
在也个html页面中加入bootstrap是很方便,就是一般的将css和js文件通过Link和Script标签就行. 那么在一个用vue-vli生成的前端项目中如何加入?因为框架不一样了,略微要适应一 ...
- vue-cli+webpack在生成的项目中使用bootstrap的方法
在一个html页面中加入bootstrap是很方便,就是一般的将css和js文件通过Link和Script标签就行.那么在一个用vue-vli生成的前端项目中如何加入?因为框架不一样了,略微要适应一下 ...
- vue-cli+webpack在生成的项目中使用bootstrap方法(一)
在一个html页面中加入bootstrap是很方便,就是一般的将css和js文件通过Link和Script标签就行. 那么在一个用vue-vli生成的前端项目中如何加入?因为框架不一样了,略微要适应一 ...
- 在 Vue-cli 创建的项目中引入 Element-UI
Element-UI 是饿了么前端团队退出了一套基于 vue.js 开发的 UI 组件库,在与 Vue-cli 创建的项目结合时,需要做以下配置: 1. 安装 loader 模块 cnpm insta ...
- 《论vue在前后端分离项目中的实践之年终总结》
我是2014年的时候开始了解知道的vue,当时vue还不太成熟,想用但是又怕自己hold不住,况且那时候vue还没有成熟的(路由.验证.ui组件)插件,社区也是不温不火的,再说也没有合适的机遇让我去项 ...
随机推荐
- maven仓库镜像、私服与jdk版本配置
--配置全局镜像,setting.xml <mirrors> <mirror> <id>alimaven</id> <name>aliyun ...
- MongoDB 索引 .explain("executionStats")
MongoDB干货系列2-MongoDB执行计划分析详解(3) http://www.mongoing.com/eshu_explain3 MongoDB之使用explain和hint性能分析和优化 ...
- Qt QPixmap QImage 图片等比例缩放到指定大小
QPixmap pixmap(path); //pixmap=QPixmap::fromImage(imgShow); pixmap = pixmap.scaled(, , Qt::KeepAspec ...
- 解决UITextView滚动后无法显示完整内容
滚动UITextView,偶尔内容只显示一半,现象如下
- win10远程桌面身份验证错误,要求的函数不受支持
出现原因win10最近安装了一个更新补丁导致的,当然可以直接卸载这个补丁,也可以安装操作来就可以.需要修改注册表里边的项目,添加下面的设置. 解决办法1.win+R 输入 regedit, 打开注册表 ...
- P - Atlantis (线段树+扫描线)
There are several ancient Greek texts that contain descriptions of the fabled island Atlantis. Som ...
- wsdl中含ref="s:schema"时处理
转载地址:http://ljhzzyx.blog.163.com/blog/static/38380312201471375946602/
- android采用MVP漫画APP、适配刘海屏、小黄车主界面、录音波浪动画、综合APP等源码
Android精选源码 一款采用MVP架构的仿完整漫画APP源码 Android适配刘海屏幕 基于Xmpp协议的即时通讯社交软件(客户端+服务端) Android小黄车(ofo)app主页菜单效果 一 ...
- Yii框架的学习指南(策码秀才篇)1-2 一步步学习yii framework
我也是新手,不过之前学习了tp和ci框架,所以尝鲜想看看yii到底有多强大. 如何新建一个webapp(网站应用)呢,下面是2个步骤: 1. cmd 切换到htdocs下面的yii目录下的framew ...
- 二:MySQL的操作
1:创建数据库 create database bjpowernode ; 2:使用数据库 use bjpowernode; 3:导入数据库文件sql source 然后把SQL文件拖过来就可以了 ...