はWebPACKの

Question

私は私のプロジェクトでこのフォントに含める

とCSS-フォント（SVG、EOT、WOFF、woff2およびTTF）をロードできません：

@font-face { 
    font-family: 'bikeshop'; 
    src: url('/src/styles/bikeFont/font/bikeshop.eot?37006833'); 
    src: url('/src/styles/bikeFont/font/bikeshop.eot?37006833#iefix') format('embedded-opentype'), 
     url('/src/styles/bikeFont/font/bikeshop.woff2?37006833') format('woff2'), 
     url('/src/styles/bikeFont/font/bikeshop.woff?37006833') format('woff'), 
     url('/src/styles/bikeFont/font/bikeshop.ttf?37006833') format('truetype'), 
     url('/src/styles/bikeFont/font/bikeshop.svg?37006833#bikeshop') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

"NPMの実行サーバー" を経由してコンパイルし、正常に動作しますしかしfonticonsがウェブサイト

に示されていないコンソールは、これらのエラーをログに記録します。

GET "domain"/src/styles/bikeFont/font/bikeshop.woff2?37006833 
File: shared_styles_host.js:90 
GET "domain"/src/styles/bikeFont/font/bikeshop.woff?37006833 
File: src/styles/bikeFont/font/bikeshop.woff?37006833:1 
GET "domain"/src/styles/bikeFont/font/bikeshop.ttf?37006833 
File: src/styles/bikeFont/font/bikeshop.ttf?37006833:1 

は、私は私のwebpack.common.jsで、このために新しいローダーを含める必要がありますか？

編集：

私は私のSCSSファイルにする@ font-faceをロードし、それ

{ 
    test: /\.scss$/, 
    exclude: /node_modules/, 
    loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader 
}, 

Answer 1

このWebPACKのルールを使用file-loaderかurl-loaderと一緒css-loaderを使用してください。例：

{ 
    module: { 
    rules: [{ 
     test: /\.css$/, 
     loader: 'css-loader' 
    }, { 
     test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/, 
     loader: 'url-loader', 
     options: { 
     limit: 10000 
     } 
    }] 
    } 
} 

Answer 2

CSSを使用してwebpackでフォントと画像を処理する場合は、simon04's answerを使用してください。あなたはちょうどあなたがCSSのWebPACKのを使用して、あなたのCSSのすべてのURLパスを無視したい場合は

は（あなたは、参照資産を提供扱う自分なります）あなたはcss-loaderにfalseにurlオプションを設定できます

{ 
    test: /\.css$/, 
    use: { 
     loader: 'css-loader', 
     options: { url: false } 
    } 
} 

https://github.com/webpack/css-loader#options-1