をコピーしません、私はそうのように、WebPACKのコンフィグのファイルローダーを設定している:WebPACKのファイルローダーはAngular2アプリケーションでファイル
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
ありがとうございました。私の質問に上記の情報を追加しました。私は資産の先頭のスラッシュを削除します。 – ruk
JSアプリケーションファイルをお持ちでない場合はどうなりますか? – evolutionxbox
@evolutionxboxを詳しく説明できますか –