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