如何在 angular2 webpack 上添加真棒答案

【问题标题】：How to add awesome on angular2 webpack如何在 angular2 webpack 上添加真棒
【发布时间】：2016-09-17 14:06:12
【问题描述】：

我使用 angular2 webpack ，bootstrap 4，并希望包含 awesome font

'Package.json'：

"font-awesome": "^4.6.3", "font-awesome-loader": "1.0.0",
"awesome-typescript-loader": "^2.2.1",

'webpack.common.js'

module: {
          postcss: [autoprefixer],  
          preLoaders: [
            {
              test: /\.ts$/,
              loader: 'string-replace-loader',
              query: {
                search: '(System|SystemJS)(.*[\\n\\r]\\s*\\.|\\.)import\\((.+)\\)',
                replace: '$1.import($3).then(mod => (mod.__esModule && mod.default) ? mod.default : mod)',
                flags: 'g'
              },
              include: [helpers.root('src')]
            },

          ],
          loaders: [
            {
              test: /\.ts$/,
              loaders: [
                '@angularclass/hmr-loader?pretty=' + !isProd + '&prod=' + isProd,
                'awesome-typescript-loader',
                'angular2-template-loader'
              ],
              exclude: [/\.(spec|e2e)\.ts$/]
            },


            {
              test: /\.json$/,
              loader: 'json-loader'
            },
            { test: /\.css$/, loader: 'raw' },

            {
              test: /\.html$/,
              loader: 'raw-loader',
            },

            { test: /\.(jpg|png|gif)$/, loader: 'file' },
            { test: /\.scss$/, loaders: ['raw', 'postcss?sourceMap', 'sass?sourceMap'] },
            { test: /\.(woff2?|ttf|eot|svg)$/, loader: 'url?limit=10000' },

            { test: /bootstrap\/dist\/js\//, loader: 'imports?jQuery=jquery' }
          ],

          postLoaders: [
            {
              test: /\.js$/,
              loader: 'string-replace-loader',
              query: {
                search: 'var sourceMappingUrl = extractSourceMappingUrl\\(cssText\\);',
                replace: 'var sourceMappingUrl = "";',
                flags: 'g'
              }
            }
          ]

'vendor.js'

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

当我在 home.component.ts

中使用时

 <button type="submit" name="search" >
      <i class="fa fa-search"></i>
    </button>

有错误：

./~/css-loader!./~/raw-loader!./~/font-awesome/css/font-awesome.css?
  Module build failed: Unknown word (1:1)

   @ ./~/style-loader!./~/css-loader!./~/font-awesome/css/font-awesome.css?
4:14-102
    @ ./src/vendor.browser.ts
  @ multi vendor

【问题讨论】：

标签： angular webpack font-awesome

【解决方案1】：

试试这个

    { 
 test: /bootstrap\/js\//, loader: 'imports?jQuery=jquery' },
          {
            test: /\.(woff|woff2|eot|ttf)(\?.*$|$)/,
            loader: 'url-loader?importLoaders=1&limit=100000'
          }

导入引导使用这一行

import 'bootstrap/dist/css/bootstrap.css'

为了导入字体，请在您的 css 文件中使用这一行

@import url(https://fonts.googleapis.com/css?family=Oswald:400,700);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i);

这些对我有用，希望对你有帮助

【讨论】：

` { 测试：/\.(woff|woff2|eot|ttf|svg)(\?.*$|$)/，加载器：'url-loader?importLoaders=1&limit=100000' },` 但错误仍然存在。