Angular2/Webpack：CSSファイル内に読み込まれるフォントを読み込む方法は？

Question

私はAngular2 beta.15とwebpack 1.12.14を使用しています。

私はapp.component.tsに1つの.cssファイルと1つの.scssファイルをこのようなグローバルパターンとして持っています。 webpack.config.jsで

@Component({ 
    selector: 'my-app', 
    templateUrl: 'app/app.component.html', 
    styles: [ 
     require('../stylesheets/css/main.min.css'), 
     require('../sass/example.scss') 
    ], 
    encapsulation: ViewEncapsulation.None, 
    }) 

そして、.cssファイル内で、いくつかのフォントは以下のようにインポートされ、

@font-face { 
    font-family: 'Helvetica Neue'; 
    src: url(fonts/light/helvetica-neue-light.eot) format("eot"), 
     url(fonts/light/helvetica-neue-light.woff2) format("woff2"), 
     url(fonts/light/helvetica-neue-light.woff) format("woff"), 
     url(fonts/light/helvetica-neue-light.ttf) format("truetype"); 
    font-weight: 300; 
    font-style: normal 
} 

、私は.cssローダー、.scss、および

{ 
    test: /\.scss$/, 
    exclude: /node_modules/, 
    loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader 
    }, 
    { 
     test: /.(png|woff(2)?|eot|ttf|svg)(\?[a-z0-9=\.]+)?$/, 
     loader: 'url-loader' 
    }, 
    { 
    test: /\.css$/, 
    loaders: ['style', 'css'] 
    }, 

と、以下のようなフォントを持っていますwebpack -display-error-detailsを実行したところ、エラーはまったくありませんでしたが、アプリケーションを実行するためにサーバーを起動したとき、以下のようなエラーが発生しました

EXCEPTION: Error during instantiation of Token Promise<ComponentRef>!. 
ORIGINAL EXCEPTION: Expected 'styles' to be an array of string 

私は

{ 
    test: /\.css$/, 
    loader: 'url-loader' //or use 'raw-loader' 
    }, 

にCSSローダーを変更した場合、これらの例外が消失し、アプリが起動しましたが、私は、ブラウザのコンソールでこれらのフォントのためのいくつかの404個の要求のエラーを得た、彼らは時にロードされていませんすべて。 それで、あなたに私にいくつかの指針を与えることができますか？私はローダーの設定に何か間違っていると思う。

Answer 1

複数のローダーを連鎖させると、アクションの順序は右から左に完了します。

ローダーの結果コードは、次のコードに渡されます。あなたは自動的にスタイルでbase64エンコードに変換し、あなたが最初にする必要があり、最初のフォントのURLを持っている必要がありますので

loaders: ['raw-loader', 'url-loader'] 

：この場合、あなたはあなたに望ましい結果をもたらすためにチェーンに、このようなraw-loaderとurl-loaderをしたいですあなたのチェーンにurl-loaderと電話してください。次に、このファイルをmodule.exportsとしてインポートするため、raw-loaderを呼び出します。

ので、チェーンに次の処理が行われます。

1. url-loaderを：base64:dataに静的な資産にあなたのURL参照のすべてを変換します。
2. raw-loader：私はあまり、同様のコマンドのcommanandをkhow

   @Component({ 
   selector: 'my-app', 
   templateUrl: 'app/app.component.html', 
   styles: [ 
       require('../stylesheets/css/main.min.css').toString(), 
       require('!style-loader!css-loader!less-loader!../less/example.less').toString() 
   ]}) 
   

   ：これを試してみてください、あなたのファイルを受け取り、その文字列でそのコード全体をラップして、module.exports='string'

Answer 2

 Just Try once to keep under one dir both font and css 

     // and give the reference onces in webpack.config.rb 

     # Set this to the root of your project when deployed: 
     http_path = "/" 
     css_dir = "app/assets/css" 
     sass_dir = "app/assets/sass" 

Answer 3

を追加することによって、それがインポート可能になりscssのために利用できるはずです