Webpack CSSの背景画像が表示されない

Question

webpackを使用しているときにCSSの背景イメージが表示されています。

私は、次のCSSクラスがあります（そうリアクトclassNameのないクラスを使用）

.fb { 
    display: block; 
    width:30px; 
    height: 30px; 
    background-color: red; 
    background-image: url('../images/icons/facebook.png'); 
} 

使用方法：以下

<div className="fb"></div>

WebPACKのバンドル私の 'web_build' フォルダの画像です私のすべてのファイルを。ハイライトされたのが犯人のイメージです。

次は、私はクロームのdevのツールのネットワークタブに表示バンドルSCSSファイルです。 'Img'タブに画像ファイルが表示されません。

.fb { 
    display: block; 
    width: 30px; 
    height: 30px; 
    background-color: red; 
    background-image: url(1b725f86d1e04faadfad0cda2ac6ee89.png); 
} 

レンダリングされたものはすべて30x30pxの赤い四角です。

NOTES：

• I直接<img>タグ、画像ショーを使用して画像を参照する場合。
• 私は次のような構成

{ 
    test: /\.(jpe?g|png|gif|svg|ttf|eot|svg|woff(2)?)$/i, 
    loaders: [ 
     'file?hash=sha512&digest=hex&name=[hash].[ext]', 
     'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false' 
    ] 
    }, 

で画像WebPACKのローダを使用していWebPACKの-devのサーバー

を使用している他の情報が必要な場合、私に教えてください。

ありがとうございました。

Answer 1

CSS/SASSバンドルでsourceMapを含めると、CSSの相対イメージURLが壊れることがわかりました。

解決方法：ソースマップをオフにするか、完全修飾のpublicPath URLを指定します。

以下は私のために働いた。

publicPath: 'http://localhost:8080' 

詳しい情報ここ https://github.com/webpack/style-loader/issues/55

Answer 2

image-webpack-loaderは、イメージを使用してイメージを圧縮します。 url-loaderまたはfile-loaderを使用してファイルをCSSに読み込みます。