Webpack 1.14でGoogle Material Icons .woff2のローカルバージョンをインポートするにはどうすればよいですか？

Question

Googleフォント.woff2ファイルを同じフォルダーから問題なくインポートしていますが、マテリアルアイコンファイルをインポートすると、同じ設定では機能しません。 .woff2ファイルは、開発者ツールのマイソースには表示されません。私はElectronで自分のプロジェクトを構築しています。

私はGoogleのインプリメンテーション・ガイドからMethod 2に従ってセットアップの残りの部分を実装している：https://google.github.io/material-design-icons/#icon-font-for-the-web

がこれで明らかに何か問題はありますか？私はこれをもっと簡単にするために多くのnpmパッケージを見たことがありますが、どのようにして簡単にするのかはっきりしません。あなたが提供できるお手伝いをありがとう。

マイWebPACKのフォントローダー

module: { 
    loaders: [ 
     { 
     test: /\.global\.css$/, 
     loaders: [ 
      'style-loader', 
      'css-loader?sourceMap' 
     ] 
     }, 
     { 
     test: /^((?!\.global).)*\.css$/, 
     loaders: [ 
      'style-loader', 
      'css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]' 
     ] 
     }, 

     { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff' }, 
     { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff' }, 
     { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream' }, 
     { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file' }, 
     { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml' }, 
    ] 
    }, 

Answer 1

私は同じ問題で戦っていました。最後に、私は、URLローダの代わりに、ファイル・ローダーを使用することを決定し、ここで私のために働いたセットアップで

WebPACKのファイル：

... 
    }, { 
     test: /\.woff2$/, 
     loader: 'file-loader?name=[name].[ext]' 
    }, { 
... 

、その後、CSSファイルで使用するには、フォントファイルをロードすることができます

を

@font-face { 
    font-family: 'MyFontName'; 
    src: url('../path_to_font/font_name.woff2') format('truetype'); 
    font-weight: normal; 
    font-style: normal; 
} 

、その後、あなたのフォントを使用することができます：font-family: 'MyFontName';

何この設定で重要なのはでurlですファイル - フォントファイルへのパスは、フォントを使用しているcssファイルからの相対パスでなければなりません。