在 angluar2 webpack 中使用 Font-awesome

Question

我一整天都在努力在使用 webpack 的 angular2 应用程序中安装 font-awesome。

更新了我的 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'

有什么解决办法吗？

Answer 1

我想你应该使用 style-loader 而不是 to-string-loader:

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

在 angluar2 webpack 中使用 Font-awesome

Use Font-awesome in angluar2 webpack

fonts

font-awesome

webpack

angular