Webpack CSS-Hintergrundbild wird nicht angezeigt

Question

Ich habe Probleme, CSS-Hintergrundbilder zu erhalten, wenn Webpack verwendet wird.

Ich habe folgende CSS-Klasse:

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

Usage (Reagieren Mit so classname nicht-Klasse):

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

Unten ist ein Bild meiner 'web_build' Ordner, in dem webpack Bündel alle meine Dateien in. Hervorgehoben ist das Täterbild.

Hier finden Sie die Bündel SCSS Dateien, die ich in der Registerkarte Netzwerk von Chrom Entwickler-Tools zu sehen. Auf der Registerkarte "Img" werden keine Bilddateien angezeigt.

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

Alles was ich sehe gerendert ist ein 30x30px rotes Quadrat.

NOTES:

• Wenn ich das Bild unter Verwendung eines <img> Tag direkt verweisen, das Bild darstellt.
• I webpack-dev-Server
• I

{ 
    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' 
    ] 
    }, 

Lassen Sie mich wissen, wenn andere Informationen benötigt bin mit der folgenden Konfiguration Bild webpack-loader bin mit ist .

Danke.

Answer 1

Nach etwas mehr Suche stellt sich heraus, dass inclusive sourceMap in meinem CSS/SASS-Bundling relative Bild-URLs in CSS bricht.

Lösung: Deaktivieren Sie Quellmaps oder geben Sie eine vollständig qualifizierte publicPath-URL an.

Folgendes funktionierte für mich.

publicPath: 'http://localhost:8080' 

Weitere Informationen hier https://github.com/webpack/style-loader/issues/55

Answer 2

Der image-webpack-loader komprimiert nur die Bilder mit imagemin. Verwenden Sie url-loader oder file-loader, um die Datei in Ihr CSS zu laden.