vue引入iconfont阿里字體圖標庫以及報錯解決

下載阿里的字體圖標庫文件，放在\src\assets\font文件夾下面。

安裝style-loader,css-loader和file-loader (或url-loader)  ,記得--save-dev

webpack的配置文件中添加：

{
test: /\.css$/,
use:['style-loader','css-loader']
},
{
test:/\.(ttf|eot|woff|woff2|svg)$/,
use:['file-loader']
}

入口文件main.js引入

import './assets/font/iconfont.css';

 

若是已經安裝了插件，webpack配置文件裏面也添加，仍是報如下錯誤：

Unexpected character '@' (2:0)
You may need an appropriate loader to handle this file type.
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1529419541319'); /* IE9*/
src: url('iconfont.eot?t=1529419541319#iefix') format('embedded-opentype'), /* IE6-IE8 */

建議檢查仔細webpack配置文件是否有錯誤，好比逗號，括號等是否漏寫。

而後從新運行項目npm run dev。
若是仍是報錯，試試將iconfont.css文件中的路徑修改下，而後從新運行項目。

@font-face {font-family: "iconfont";
src: url('./iconfont.eot?t=1529419541319'); /* IE9*/
src: url('./iconfont.eot?t=1529419541319#iefix')