7

Angular2 アプリケーションでは、次のように webpack 構成でファイル ローダーをセットアップしています。

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

私はこれを設定の他の場所にも持っています：

modulesDirectories: ['node_modules']

私が理解しているように、ファイル ローダーは指定された式 (この場合はフォント ファイル) に一致するファイルを 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-loader は最終的にこれを適用して、次の 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ビルド時にアセット/フォントにコピーされるようにするには、ファイルをどこに置きますか?

パイプラインでも使用していsass-loaderます: { test: /.scss$/, loaders: ['raw-loader', 'sass-loader'] }

次のように私のコンポーネントにsassを含めます：

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

ブラウザから見ると CSS が HTML に含まれていることがわかりますが、フォントを呼び出すと 404 が返されます。

4

1 に答える 1

9

動作が少し異なります。

テスト正規表現に一致するすべてのファイルを単純にコピーするわけではありません。正規表現に一致するすべての必要なファイルをコピーします。これが意味することは、コードのどこかで、フォントをロードする css ファイル (または sass 以下) を要求する必要があるということです。Webpack は、フォントがアセット フォルダーにコピーされていることを確認します。

/の前に をドロップできることに注意してください/assets/fonts/...。

編集vendor.scssjs 内のアプリの先頭のどこかに sass ファイルが必要であることを確認してください。

例

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

Webpack はファイルをロードし、依存関係を準備します。js 内で sass を要求するのは奇妙に見えますが、それが機能する方法です。:)

于 2016-08-24T15:09:42.533 に答える