使用字體awesome在angluar2 webpack

我一直在掙扎整天安裝字體真棒在使用webpack的angular2應用程序。使用字體awesome在angluar2 webpack

更新了我的webpack.config.js包括加載字體文件：

module: { 
loaders: [ 
    { test: /\.ts$/, loader: 'awesome-typescript-loader' }, 
    { test: /\.json$/, loader: 'json-loader' }, 
    { test: /\.html/, loader: 'raw-loader' }, 
    { test: /\.css$/, loader: 'to-string-loader!css-loader' }, 
    // For font-awesome 
    {test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file?name=fonts/[name].[hash].[ext]?'} 
]

}，

安裝使用字體真棒：

npm install font-awesome

添加需要對TS文件 require('../node_modules/font-awesome/css/font-awesome.css');

而我一直在得到這個錯誤：

ERROR in ./~/font-awesome/css/font-awesome.css Module build failed: Error: Cannot find module '../fonts/fontawesome-webfont.eot?v=4.6.3'

任何想法如何解決這個問題？

來源

2016-09-14 Salma Hamed

有一個插件[鏈接]（https://www.npmjs.com/package/angular2-fontawesome），但它一直沒有自2個月前更新，我不知道它是否支持更新版本的角 – mpilliador

我猜你應該使用style-loader而不是to-string-loader：

{ test: /\.css$/, loader: 'style!css' },

來源

2016-09-14 11:52:33 yurzui

這使得錯誤消失。但我仍然無法找到出現在html中的圖標。 –

你需要在文件加載器loader中檢查你的路徑：'file？name = fonts/[name]。[hash]。[ext]？''還要檢查瀏覽器控制檯 – yurzui

使用字體awesome在angluar2 webpack

回答

相關問題