vue 引入stylus文件 报错问题

用vue写程序想要引入icon font styl 文件时候，发现有错误，之前也学过同样的课程但没有出现这个错误，纠结了一个晚上后，第二天起来解决了问题，现在把过程记下，希望能够帮助到遇到同样问题的兄弟们。

首先我是在icon'moon 上下的svg 的css。以下传送门icomoon。强推一波这个网站，有好多svg图片，当然你也可以自己下载。粗略讲一下过程吧，懂的兄弟自动跳过这一part.......选择好你需要的图片后修改一下名字，点击右下角就可以打包下载。

            解压后长这样   

然后将style文件和fonts文件扔到你的项目中去，我放进去的时候改了名称和文件类型，所以是如下图的icon.styl,项目结构长这样：

，

到这里，先别着急引入，你需要先安装stylus和stylus-loade，先在paxkage.json中添加以下两项，然后使用npm install安装：

      

以下重点来了，当你想要在项目中引入的时候

     

他可能会报以下错误：

简单来看就是路径不对，所以你应该修改路径，依照上面的过程来看，应该在icon.styl中修改fonts的路径：

    

如果你到这一步已经解决问题了那么恭喜你，但如果你和我一样还是会报错，那就接着看吧。。到这一步我查了网上很多资料，有说是webpack 的问题，如这个webpack使用css-loader?sourceMap导致font(eot、ttf)等无法加载问题，但我检查了一下，发现没有问题，在你安装stylus的时候，他就会给你加上了。所以还是坚信是路径问题，所以继续修改路径，使用绝对路径，

    

于是乎没有报错了！！虽然解决了问题，但还是想不通为什么使用相对路径却找不到文件，有兄弟知道的可以留言解答一下。最后总结，遇到问题还是不要太心慌，马上去复制粘贴百度，首先应该看一下报的是什么错误，然后再对症下药找答案，这样会快很多。