のWebPACK

Question

私はangular2のWebPACK、ブートストラップ4を使用し、含めたい素晴らしいフォント

'Package.json'：

"フォント素晴らしいです"： "^ 4.6.3"、 "フォント素晴らしい-ローダー"： "1.0.0"、
"素晴らしい-typescriptです-ローダー"： "^ 2.2.1"、

'webpack.common.js'

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

'vendor.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' 
       } 
      } 
      ] 

私はhome.component.ts

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

に使用する場合がありますエラー：

あなたのCSSファイルで

Answer 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' 

このラインフォントの使用をインポートするための

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

これらは私のために働いていますそれがあなたに役立つことを願って