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')