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

2017年8月9日 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
我的微信
爱生活、爱学习的小伙伴可以通过扫一扫二维码添加我的个人微信一起交流!
v-if与v-show的区别 Vue

v-if与v-show的区别

相同点:v-if与v-show都可以动态控制dom元素显示隐藏 不同点:v-if显示隐藏是将dom元素整个添加或删除,而v-show隐藏则是为该元素添加css--display:none,dom元素还...
vue-cli 引入 stylus 遇到的坑 Vue

vue-cli 引入 stylus 遇到的坑

最近在使用vue-cli创建项目时发现无法在js文件中引入stylus文件,错误提示: 经过反复折腾,发现原来是配置出了问题,解决方案如下: 在package.json文件中增加如下代码: "styl...
匿名

发表评论

匿名网友

评论:1   其中:访客  1   博主  0
    • avatar 匿名 2

      谢谢博主解决了