利用 vue-cli 搭建的項(xiàng)目平臺(tái)

創(chuàng)新互聯(lián)專注于甘泉網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供甘泉營(yíng)銷型網(wǎng)站建設(shè)，甘泉網(wǎng)站制作、甘泉網(wǎng)頁(yè)設(shè)計(jì)、甘泉網(wǎng)站官網(wǎng)定制、成都微信小程序服務(wù)，打造甘泉網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供甘泉網(wǎng)站排名全網(wǎng)營(yíng)銷落地服務(wù)。

利用stylus寫的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è)參考，也希望大家多多支持創(chuàng)新互聯(lián)。