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