1. 程式人生 > >vue 引入stylus檔案 報錯問題

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 的問題,如這個

    

於是乎沒有報錯了!!雖然解決了問題,但還是想不通為什麼使用相對路徑卻找不到檔案,有兄弟知道的可以留言解答一下。最後總結,遇到問題還是不要太心慌,馬上去複製貼上百度,首先應該看一下報的是什麼錯誤,然後再對症下藥找答案,這樣會快很多。