Vue2.x中利用@font-size引入字體圖標報錯的解決方法
更新時間：2018年09月28日 10:38:05 作者：優(yōu)雅1217
今天小編就為大家分享一篇Vue2.x中利用@font-size引入字體圖標報錯的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
利用 vue-cli 搭建的項目平臺
利用stylus寫的css樣式
有 css-loader 依賴包x
下圖是 webpack.base.conf.js 關(guān)于字體文件的配置
有人這里會有重復的字體文件的配置，刪除一項即可
出現(xiàn)的問題：引入字體圖標出現(xiàn)問題
1.報錯
將字體引入的相對路徑改成絕對路徑
相對路徑
絕對路徑
2.不報錯，但是出現(xiàn)的字體圖標是小方框
有警告信息：
小方塊：
報錯是因為重定向的問題
出現(xiàn)上述問題的原因
①沒在用到的地方引入字體的樣式文件
②使用的是后綴名為 .styl 文件
③將font文件夾移動到static文件夾中，利用絕對路徑訪問，此時可以使用.styl文件
①的解決辦法是在用到的地方引入字體的樣式文件（全局引入的話需要從app.vue里引入）
@import '文件路徑'
②的解決辦法是把font.styl改為font.css（stylus預處理器的原因）
然后再需要用到的地方引入
@import '文件路徑'
③把存放字體的font文件夾移動到和src平級的static文件夾中，之后在icon.styl文件中用絕對路徑訪問
以上這篇Vue2.x中利用@font-size引入字體圖標報錯的解決方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vite+vue3項目啟動報錯Unexpected?“%“問題及解決
這篇文章主要介紹了vite+vue3項目啟動報錯Unexpected?“%“問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要為大家詳細介紹了vue實現(xiàn)調(diào)取手機攝像頭和相冊功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
關(guān)于Vue新搭檔TypeScript快速入門實踐
這篇文章主要介紹了關(guān)于Vue新搭檔TypeScript快速入門實踐，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
在本篇文章里小編給大家整理的是關(guān)于Vue+Vuex實現(xiàn)自動登錄的知識點詳解，需要的朋友們可以學習下。2020-03-03
下面小編就為大家分享一篇vue 實現(xiàn)類似淘寶星級評分的示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vue.js利用defineProperty實現(xiàn)數(shù)據(jù)的雙向綁定
本篇文章主要介紹了用Node.js當作后臺、jQuery寫前臺AJAX代碼實現(xiàn)用戶登錄和注冊的功能的相關(guān)知識。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04
這篇文章主要為大家介紹了vue阻止重復請求實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
這篇文章主要為大家詳細介紹了如何通過vue實現(xiàn)打印功能,文中的示例代碼講解詳細,具有一定的借鑒價值,感興趣的小伙伴可以跟隨小編一起學習一下2023-12-12
這篇文章主要介紹了vue動態(tài)子組件的兩種實現(xiàn)方式,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-09-09
定時器如果不及時合理地清除，會造成業(yè)務邏輯混亂甚至應用卡死的情況，這個時就需要清除定時器，本文就介紹了Vue如何優(yōu)雅的清除定時器，感興趣的可以了解一下2021-07-07