Webpack: laden Hintergrundbilder in scss Datei zeigt nicht

Question

Ich versuche, Webpack sass-loader zu verwenden, um eine .scss Datei zu laden, die Hintergrundbilder enthält. Ein Teil des .scss ist wie

.clouds_two { 
    background: url(require("../../../images/cloud_two.png")); //no error, just not display 
    //background: url("../../../images/cloud_two.png");  // 404 error 
    position: absolute; 
    left: 0; 
    top: 0; 
    height: 100%; 
    width: 300%; 
    -webkit-animation: cloud_two 75s linear infinite; 
    -moz-animation: cloud_two 75s linear infinite; 
    -o-animation: cloud_two 75s linear infinite; 
    -webkit-transform: translate3d(0, 0, 0); 
    -moz-transform: translate3d(0, 0, 0); 
    -o-transform: translate3d(0, 0, 0) 
} 

Entsprechende Lader in meiner webpack Konfigurationsdatei festgelegt werden als

{ 
    test: /\.scss$/, 
    exclude: /node_modules/, 
    loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader 
    }, 
    { 
     test: /\.(png|jpg|gif)$/, 
     loader: 'url-loader?limit=8192' 
    }, // inline base64 URLs for <=8k images, direct URLs for the rest 

Meine .scss Datei in src/app/components/login/ ist und das Bild ist in src/images/. Der Webpack-Ausgabeordner ist dist, der die gleiche Ebene wie src Ordner hat.

Das Problem ist, wenn ich background: url(require("../../../images/cloud_two.png")); verwende, gibt es keinen Fehler, aber das Hintergrundbild nicht angezeigt.

Wenn ich background: url("../../../images/cloud_two.png"); verwende, gibt es einen 404-Fehler, der sich beschweren http://localhost:8080/images/cloud_two.png. Die sass-loader Readme hat einen Problems with url(...) Abschnitt, aber es kann meinen Fall nicht beheben.

Answer 1

Ich finde es heraus. In dieser webpack.common.js Datei kann die CopyWebpackPlugin Dateien und Verzeichnisse in Webpack kopieren.

new CopyWebpackPlugin([{ 
    from: 'src/assets', 
    to: 'assets' 
}]), 

Der Pfad stimmte nicht mit meiner Projektstruktur überein. Und nachdem ich es geändert habe, kann meine .png s in das Webpack kopiert werden. Und in meiner .scss Datei funktioniert background: url("assets/cloud_two.png"); für mich.

Hinweis: Der Pfad in url() ist relativ zum Webpack-Ausgabeordner. Z.B. Mein Ausgabeordner ist wie

dist 
    /assets 
     cloud_two.png 
    main.bundle.js 
    vendor.bundle.js 
    polypill.bundle.js