1. 程式人生 > >vue 專案引入字型圖示報錯、不顯示等問題

vue 專案引入字型圖示報錯、不顯示等問題

問題:在專案開發時使用字型圖示,發現兩個問題;

1、出現報錯:


解決方法為:把字型引入方式改為絕對路徑


2、不報錯,但是不顯示圖示字型,出現方框


原因可能有兩種:①沒在用到的地方引入字型的樣式檔案你使用的是字尾名為 .styl 檔案

①的解決辦法是在用到的地方引入字型的樣式檔案(全域性引入的話需要從app.vue裡引入)


這個就是我遇到的問題,浪費了我好幾分鐘!!!微笑

   解決辦法是把font.styl改為font.css


記得在用到圖示的地方引入


問題原理後續再寫

相關推薦

vue 專案引入字型圖示顯示問題

問題:在專案開發時使用字型圖示,發現兩個問題;1、出現報錯:解決方法為:把字型引入方式改為絕對路徑2、不報錯,但是不顯示圖示字型,出現方框原因可能有兩種:①沒在用到的地方引入字型的樣式檔案②你使用的是字尾名為 .styl 檔案①的解決辦法是在用到的地方引入字型的樣式檔案(全域

Vue2.x中利用@font-size引入字型圖示

利用 vue-cli 搭建的專案平臺 利用stylus寫的css樣式 有 css-loader 依賴包x 下圖是 webpack.base.conf.js 關於字型檔案的配置 有人這裡會有重複的字型檔案的配置,刪除一項即可 出現的問題:引入字型圖標出現問題 1

vue-cli搭建的專案引入.css檔案

Module build failed: ParseError: E:\Demo\vuedemo\myvuedemo\node_modules\swiper\dist\css\swiper.css:4:96 1| // style-loader: Adds

vue專案引入Iconfont圖示

 在進行專案開發過程中,vue專案中前端所使用的UI框架是element ui,但是element的字型圖示庫不足以滿足日常開發的需要,或者公司專案要求使用本公司ui設計的圖示,都可以參考以下的步驟,  1. 在阿里圖示庫中選中你想要的圖示庫,並點選進去,  2. 注意: 我們在選擇圖示是後,如果是需要多

VUE專案在IE下“ReferenceError: Promise未定義”的解決辦法

VUE專案在IE下報錯“ReferenceError: Promise未定義”的解決辦法 問題原因: IE一些低版本的瀏覽器對於ES6語法不支援 Promise是es6語法裡為了解決非同步函式多重巢狀的問題(回撥地獄) 說明: 或許你並不沒有使用Promise,但是有可

vue專案執行 ENOTFOUND localhost

Error: getaddrinfo ENOTFOUND localhost 報錯 提示本能獲取本地localhost服務 修改config/index.js localhost 改成 127.0.0

vue-cli引入element-ui

1.main.js按需引入引入element-ui import { Button } from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(Button) 2.首先,安裝 babe

vue專案 sockjs-node一直問題

vue3下   vue.config.js中       devServer: {       host: '0.0.0.0',       port: 8080,       proxy: {         '/': {

vue專案,打包後以及空白問題

第一次從無到有自己搭建vue專案,npm run dev完全正常,打包之後頁面空白且報錯檔案找不到 1.修改config下面的index.js assetsPublicPath預設的是  ‘/’  也就是根目錄。而我們的index.html和static在同一級目錄下面。 

Eclipse從SVN檢出maven專案後沒有jar包,顯示是maven專案

Eclipse從SVN檢出maven專案後,會發現它只是一個普通的java project,如圖: 這裡我們需要把它轉成maven-webapp,並調整相關屬性,設定執行環境,關聯相關jar目錄等。 個人環境: eclipse4.4 Luna   JDK7    Tomcat7    Maven3.1

Android Studio 拖入控制元件顯示的解決辦法

當拖放控制元件到螢幕時,會報2個錯誤:       錯誤資訊1:Failed to load AppCompat ActionBar with unknown error.       錯誤資訊2:This view is no

vue專案打包後路由檢視router-view 顯示

早段時間 ,用腳手架vue-cli 搭建的專案,build後放於伺服器上,發現其他資源全部變成靜態載入成功,但路由檢視為空, Vue.use(VueRouter) const router = new VueRouter({ mode: 'history',

eclipse專案中jsp檔案全部String

eclipse專案中jsp檔案全部報錯、String報錯 搜了好多,主要是新匯入的專案中沒有本地路徑的系統包,這就要構建包路徑。 主要用buildpath,但是我的出問題的工程右擊沒有buildpath(其他工程中有),綜合一下解決方法。 1、找到buildpath Window

idea操作 clone專案 import專案所有註解全部

操作:從現有的git上邊clone專案,前提是開發工具,開發環境都一樣錯誤型別:所有的註解全部報錯   原因: 是選擇了Create from existing source 一路Next下去,Maven專案匯入成功 Import from

Vue-Axios外掛使用指南,封裝鑑權跳轉攔截

熟練使用axios框架,可以讓我們省去很多重複的、繞彎路多的寫法。 前言 不推薦完全copy過去,可以看看我是如何針對我這邊業務; 做的一個axios的封裝及實現的思路 需求及實現 統一捕獲 前言 不推薦完全copy過去,可以看看我是如何針對我這邊業務; 做的一個axi

IDEA到符號或者包(前提:自己寫的程式碼沒有異常並且包明確的引入專案了)

今天樓主在開發專案的時候,發現IDEA報找不到符號或者包,樓主仔細檢查發現包都已經匯入了,經過網上的搜尋,辦法終於有了 樓主是通過最後一條方法解決的!現在分享給大家: 最近在使用IDEA的時候,突然出現過找不到包或者找不到符號的情況,在確定了自己引用存在的情況下,可以嘗試以下幾種方式

Vue專案引入阿里巴巴向量圖示

新增圖示並下載 一、點選圖示管理–>我的專案,建立專案 簡單點~填個專案名即可 二、選擇一個圖示,加入購物車 點選右上角購物車的圖示,新增至專案(可以直接點選下載程式碼,不需要建立專案,但是

1webpack搭建專案時出現的“Module build failed (from ./node_modules/css-loader/dist/cjs.js) CssSyntaxError”

控制檯出現的錯誤如下:                    webpack.config.js中的配置如下: module.exports={ entry:'./src/main.js

vue 引入stylus檔案 問題

用vue寫程式想要引入icon font styl 檔案時候,發現有錯誤,之前也學過同樣的課程但沒有出現這個錯誤,糾結了一個晚上後,第二天起來解決了問題,現在把過程記下,希望能夠幫助到遇到同樣問題的兄弟們。首先我是在icon'moon 上下的svg 的css。以下傳送門ico

vue專案中icon圖示的完美引入

第一步: 進入阿里向量圖示庫並登入 地址:https://www.iconfont.cn 第二步: 選擇專案需要的圖示新增到庫 第三步: 選完之後點選右上角的購物車,開啟後點擊新增到專案,沒有就自己建一個(按鈕都在同一個頁面) 第四步: 新增到專案後,在彈出的頁面修改專案防止icon命名