styl文件的引入问题与图标字体里url无法解析的问题

2017年8月9日22:35:03 1 已收录

最近在写V2.0项目时遇见一个比较恶心的bug,折腾了大半天,在上网找了各种资料,也没有找到正确的解决方案,功夫不负有心人,终于在我各种尝试中,解决了问题。

我在已经配置好webpack相关 stylus 、stylus-loader 解析模块之后,在main.js 中引入 styl 文件 导致了一个报错,具体如下:

引入styl文件代码:

import './common/stylus/index.styl';

错误提示:

in ./src/main.js
Module not found: Error: Can't resolve 'style-loader' in '/Users/周顺峰/练习项目/ToDadytest/Vue/ele/my-ele'
 @ ./src/main.js 7:0-36
 @ multi ./build/dev-client ./src/main.js

解决方案:

不要在 main.js 中引入styl 文件,在App.vue 文件中的 style 标签中使用 @improt 引入 styl 文件,注意!:这个style 标签要添加 lang 属性 和 rel 属性

<style lang="stylus" rel="stylesheet/stylus">

还有一个图标字体的文件报错是因为无法解析@font-face里面的url,解决方案是 将fonts文件夹放到static文件夹下,然后使用跟路径/static/fonts/ ,就可以成功解决了。

weinxin
我的微信
爱生活、爱学习的小伙伴可以通过扫一扫二维码添加我的个人微信一起交流!
  • A+
所属分类:Vue
青青子衿

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:1   其中:访客  1   博主  0

    • avatar 匿名 2

      谢谢博主解决了