webpack引入font-awesome模块失败

来源:4-9 通用footer开发

miska10086

2017-07-13

很奇怪的问题,引入font-anwesome模块失败,

首先贴上webpack配置和package.json

http://szimg.mukewang.com/59678904000176a519201030.jpg

http://szimg.mukewang.com/596789040001e6ea19201030.jpg

接下来是报错信息 

如果使用 

require('node_modules/font-awesome/css/font-awesome.min.css');

这种方式引入,那么报错信息为

http://szimg.mukewang.com/596789620001f0ae12250820.jpg 

看样子是找不到模块,

然后我换了一种方式去引入

require('../../../node_modules/font-awesome/css/font-awesome.min.css');

这样报错信息是

http://szimg.mukewang.com/5967899800015aa611870443.jpg  

这个感觉是缺少loader,然后我去搜索了file-loader,发现这个可以用url-loader去替代,而且我们在url-loader里也配置了字体。

无奈 使用第三种方法

建立一个font文件夹,将文件拿出来 然后修改路径

http://szimg.mukewang.com/596789ed0001388003350326.jpg 

使用link去引入 ,依然报错,报错信息和第二种引入方式一样,

找不到解决办法了,只有求助老师了


最后贴上common.js的引入和link引入的截图

http://szimg.mukewang.com/59678a7d0001eaac19201030.jpg

http://szimg.mukewang.com/59678a7d00010ab919201030.jpg



再次追加: 群里有同学说是因为配置了sass-loader而没有配置css-loader 导致无法引入.min.css,于是我尝试引入

font-awesome.scss,未果,报错和使用link方式引入一样-  -

写回答

1回答

Rosen

2017-07-13

使用的sass,没有对css文件配置loader.所以引用font-awesome.min.css时会报错

0
5
Rosen
回复
miska10086
收到!
2017-07-13
共5条回复

真实数据对接 从0开发前后端分离的企业级上线项目

【毕设项目精品】前端实战,对接真实服务端数据,开发完整项目

4262 学习 · 4113 问题

查看课程