如何在 angular2-webpack 中使用 awesome答案

【问题标题】：How to use awesome with angular2-webpack如何在 angular2-webpack 中使用 awesome
【发布时间】：2016-10-03 03:46:46
【问题描述】：

我复制了https://github.com/AngularClass/angular2-webpack-starter 应用程序。我想使用 awesome，但它不起作用。

在webpack.common.js中，添加：

loaders: [
     { test: /\.scss$/, loaders: ['style', 'css', 'postcss', 'sass'] },
     { test: /\.(woff2?|ttf|eot|svg)$/, loader: 'url?limit=10000' },
     // Bootstrap 4
     { test: /bootstrap\/dist\/js\/umd\//, loader: 'imports?jQuery=jquery' }, ...]

和vendor.ts

import 'jquery';
import 'bootstrap-loader';
import 'font-awesome-loader';

查询和引导程序 4 很好，但很棒的图标不是。为什么？

【问题讨论】：

也许你可以像这样在 app.style.css 顶部添加 @import url("maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/…);
我将它添加到根 css 文件中，但导入时遇到了 403 。如何从本地 npm 包中添加它？因为我已经添加了。
它在你的 node_modules 中吗？然后导入'font_awesome/dist/css/font_awesome'； (css 的路径) 或者在 assets import './assets/css/font_awesome';
是的，在 node_modules file.path 中是："/node_modules/font-awesome/css/font-awesome.css" .. 如何在 src/assets 文件中写入？谢谢。
您正在使用 webpack，因此您无法从 src 目录访问 node_modules，因此如果您有供应商文件，请包含以下行 import 'font-awesome/css/font-awesome'

标签： angular webpack font-awesome

【解决方案1】：

我已经关注了

webpack.common.js 的变化

/*
 * add to Webpack Plugins
 */
const ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin;

...

/*
   add to rules 
*/
  rules: [

    /*
     * Typescript loader support for .ts and Angular 2 async routes via .async.ts
     * Replace templateUrl and stylesUrl with require()
     *
     * See: https://github.com/s-panferov/awesome-typescript-loader
     * See: https://github.com/TheLarkInn/angular2-template-loader
     */
    {
      test: /\.ts$/,
      loaders: [
        '@angularclass/hmr-loader?pretty=' + !isProd + '&prod=' + isProd,
        'awesome-typescript-loader',
        'angular2-template-loader'
      ],
      exclude: [/\.(spec|e2e)\.ts$/]
    },
  ],

  /*
    In the plugins section ad
  */
  plugins: [
     ...
  /*
   * Plugin: ForkCheckerPlugin
   * Description: Do type checking in a separate process, so webpack don't need to wait.
   *
   * See: https://github.com/s-panferov/awesome-typescript-loader#forkchecker-boolean-defaultfalse
   */
  new ForkCheckerPlugin(),
  ...
  ]

在组件中然后我包含 font-awesomem

@Component({
    selector:       'intro',
    template:    template
    styles:         [require('../../assets/css/font-awesome/css/font-awesome.min.css')        ]
})

【讨论】：