Question

我使用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

Answer 1

尝试使用此

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

用于导入bootstrap使用此行

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);

这些对我有用希望它对你有所帮助

如何在angular2 webpack上添加awesome

1 个答案: