如何在 angular2-webpack-starter 中使用 font-awesome

Jun 23, 2016

如果你跟我一样是用 angular2-webpack-starter 作为 Angular2 的脚手架的话，就可能在整合 font-awesome 时遇到问题。

因为此脚手架的设定是用 raw-loader 来载入 CSS：

/*
 * Raw loader support for *.css files
 * Returns file content as string
 *
 * See: https://github.com/webpack/raw-loader
 */
{
  test: /\.css$/,
  loader: 'raw-loader'
},

而 font-awesome 因为资源文件需要导入的原因就要用到 css-loader 和 style-loader，用 raw-loader 就载入不了图标了。

解决方案

首先安装 css-loader 和 style-loader:

cnpm install -D css-loader style-loader

因为 raw-loader 的匹配正则被设置为 \.css$, 所以我们可以把 ? 问号加在行尾来 bypass 此正则，即使用以下代码来载入 font-awesome：

require('style-loader!css-loader!font-awesome/css/font-awesome.css?');

然后图标就可以正常显示了：

<i class="fa fa-floppy-o" aria-hidden="true"></i>

[back]