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