WebPACKのファイルローダーはAngular2アプリケーションでファイル

Question

をコピーしません、私はそうのように、WebPACKのコンフィグのファイルローダーを設定している：

modulesDirectories: ['node_modules'] 

：

{ 
    test: /\.(eot|svg|ttf|woff|woff2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
    loader: 'file?name=/assets/fonts/[name].[ext]' 
    } 

は、私はまた設定の別の場所でこれを持っています

私が理解しているように、ファイルローダーは与えられた式（この場合はフォントファイル）と一致するファイルをnode_modulesフォルダーから検索し、ビルド出力の/assets/fontsフォルダーにコピーします。ただし、実際にはファイルがコピー先フォルダにコピーされないため、これは機能します。私は何が欠けていますか？

また、同じ名前の複数のパッケージにnode_modulesのファイルが存在する可能性があるため、競合の処理方法も知りたいと思います。

詳細情報： vendor.scssファイルには、以下が含まれます。 $ zmdi-font-path： "assets/fonts"; @import "〜material-design-iconic-font/scss/material-design-iconic-font.scss";

SASS-ローダーは、最終的に次のCSSをもたらすために、これを適用します。

@font-face { 
font-family: 'Material'; 
src:url('assets/fonts/Material-Design-Iconic-Font.woff2?v=2.2.0') format('woff2'),url('assets/fonts/Material-Design-Iconic-Font.woff?v=2.2.0') format('woff'),url('assets/fonts/Material-Design-Iconic-Font.ttf?v=2.2.0}') format('truetype'); 
font-weight: normal; 
font-style: normal; 
} 

上記の2つのステップがassets/fonts/Material-Design-Iconic-Font.woff2?v=2.2.0でフォントファイルにブラウザからのリクエストが発生します。これは明らかにランタイムまでは発生しません。私はrequireファイルをビルド時に資産/フォントにコピーする場所はどこですか？

Iはまた、パイプライン内sass-loaderを使用しています：{ 試験：/.scss$/、 ローダー：[ '生ローダ'、 'SASSローダ'] }

と含みますこのような私のコンポーネントでSASS：

styleUrls: [ 
'./../assets/scss/main.scss' 
] 

それは私は、ブラウザから見た場合、CSSはHTMLに含まれていることを見ることができますが、フォントへの呼び出しは404

Answer 1

を返します少し異なって動作します：

これは単にテスト正規表現に一致するすべてのファイルをコピーしません。これは、正規表現に一致するすべての必要なファイルをコピーします。つまり、あなたのコードのどこかで、フォントをロードするCSSファイル（または、それ以下）を必要とする必要があります。 Webpackはフォントがあなたの資産フォルダにコピーされることを確認します。

/を/assets/fonts/...の前に置くことができます。

EDIT あなたのjs内部のアプリの最初にどこかSASSファイルvendor.scssを必要とすることを確認します。

例

require('./path-to-vendor/vendor.scss'); 

WebPACKのは、そのファイルをロードし、あなたのための任意の依存関係を用意しております。それはjsの中にあなたのお尻を必要とするために変だと思われますが、それは動作する方法です。 :)