Vue2.x中利用@font-size引入字體圖標(biāo)報(bào)錯(cuò)的解決方法
利用 vue-cli 搭建的項(xiàng)目平臺(tái)
利用stylus寫(xiě)的css樣式
有 css-loader 依賴包x
下圖是 webpack.base.conf.js 關(guān)于字體文件的配置
有人這里會(huì)有重復(fù)的字體文件的配置，刪除一項(xiàng)即可
出現(xiàn)的問(wèn)題：引入字體圖標(biāo)出現(xiàn)問(wèn)題
1.報(bào)錯(cuò)
將字體引入的相對(duì)路徑改成絕對(duì)路徑
相對(duì)路徑
絕對(duì)路徑
2.不報(bào)錯(cuò)，但是出現(xiàn)的字體圖標(biāo)是小方框
有警告信息：
小方塊：
報(bào)錯(cuò)是因?yàn)橹囟ㄏ虻膯?wèn)題
出現(xiàn)上述問(wèn)題的原因
①?zèng)]在用到的地方引入字體的樣式文件
②使用的是后綴名為 .styl 文件
③將font文件夾移動(dòng)到static文件夾中，利用絕對(duì)路徑訪問(wèn)，此時(shí)可以使用.styl文件
①的解決辦法是在用到的地方引入字體的樣式文件（全局引入的話需要從app.vue里引入）
@import '文件路徑'
②的解決辦法是把font.styl改為font.css（stylus預(yù)處理器的原因）
然后再需要用到的地方引入
@import '文件路徑'
③把存放字體的font文件夾移動(dòng)到和src平級(jí)的static文件夾中，之后在icon.styl文件中用絕對(duì)路徑訪問(wèn)
以上這篇Vue2.x中利用@font-size引入字體圖標(biāo)報(bào)錯(cuò)的解決方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue-quill-editor 自定義工具欄和自定義圖片上傳路徑操作
這篇文章主要介紹了vue-quill-editor 自定義工具欄和自定義圖片上傳路徑操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
這篇文章主要介紹了Vue組件設(shè)計(jì)-Sticky布局,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-05-05
Vue中foreach數(shù)組與js中遍歷數(shù)組的寫(xiě)法說(shuō)明
這篇文章主要介紹了Vue中foreach數(shù)組與js中遍歷數(shù)組的寫(xiě)法說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2021-06-06
微信小程序?qū)崙?zhàn)基于vue2實(shí)現(xiàn)瀑布流的代碼實(shí)例
瀑布流，又稱瀑布流式布局，是比較流行的一種網(wǎng)站頁(yè)面布局，視覺(jué)表現(xiàn)為參差不齊的多欄布局，隨著頁(yè)面滾動(dòng)條向下滾動(dòng)，這種布局還會(huì)不斷加載數(shù)據(jù)塊并附加至當(dāng)前尾部，這篇文章主要介紹了微信小程序?qū)崙?zhàn)，基于vue2實(shí)現(xiàn)瀑布流,需要的朋友可以參考下2022-12-12
對(duì)vue v-if v-else-if v-else 的簡(jiǎn)單使用詳解
今天小編就為大家分享一篇對(duì)vue v-if v-else-if v-else 的簡(jiǎn)單使用詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
h()函數(shù)是Vue.js中的一個(gè)工具函數(shù),用于創(chuàng)建虛擬DOM節(jié)點(diǎn),具有更高的靈活性和控制力,本文介紹Vue h函數(shù)到底是個(gè)啥,感興趣的朋友一起看看吧2025-02-02
vue開(kāi)發(fā)chrome插件，實(shí)現(xiàn)獲取界面數(shù)據(jù)和保存到數(shù)據(jù)庫(kù)功能
這篇文章主要介紹了vue開(kāi)發(fā)chrome插件，實(shí)現(xiàn)獲取界面數(shù)據(jù)和保存到數(shù)據(jù)庫(kù)功能的示例，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12
本文主要介紹了Element el-upload上傳組件使用詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
ElementUI表單驗(yàn)證validate和validateField的使用及區(qū)別
Element-UI作為前端框架,最常使用到的就是表單驗(yàn)證,下面這篇文章主要給大家介紹了關(guān)于ElementUI表單驗(yàn)證validate和validateField的使用及區(qū)別,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
在vue中實(shí)現(xiàn)某一些路由頁(yè)面隱藏導(dǎo)航欄的功能操作
這篇文章主要介紹了在vue中實(shí)現(xiàn)某一些路由頁(yè)面隱藏導(dǎo)航欄的功能操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09