webentwicklung-frage-antwort-db.com.de

Webpack - sass loader kann keine Bilder finden

Das Dokument sass loader Sagt: "If you're just generating CSS without passing it to the css-loader, it must be relative to your web root". Also habe ich getan, wie es heißt, ich habe meinen index.html In meinem project root, Dann versuche ich, einen image aus meiner scss -Datei zu laden. Jetzt habe ich 2 Fehler: 1) von Chrome's console: Cannot find module "./img/header.jpg". 2) von meinem terminal:

ERROR in ./~/css-loader!./~/sass-loader!./~/resolve-url-loader!./public/css/header.scss
Module not found: Error: Cannot resolve 'file' or 'directory' ./img/header.jpg in C:\Web-Development\React\Portfolio\public\css
 @ ./~/css-loader!./~/sass-loader!./~/resolve-url-loader!./public/css/header.scss 6:64-91

webpack.config.js

module.exports = {
    entry: './main.jsx',
    output: {
        filename: './public/js/build/bundle.js'
    },
    module: {
        loaders: [
            {
              test: /\.jsx?$/,
              exclude: /(node_modules|bower_components)/,
              loader: 'babel',
              query: {
                  presets: ['react', 'es2015']
              }
          },
          {
              test: /\.scss$/,
              loaders: ["style", "css", "sass", "resolve-url"]
          },
          {
            test: /\.jpg$/,
            loader: "file?name=[path][name].[ext]"
          }
        ]
    }
};

Wenn ich meinen Code sehe, kann ich klar erkennen, dass mein CSS in <head> Gespeichert ist. Ich habe also den Pfad meines Images auf mein Stammverzeichnis gerichtet, wie in der Dokumentation angegeben, kann es aber immer noch nicht reparieren.

PDATE: Ich habe file-loader Installiert und die Anweisungen befolgt, jetzt erhalte ich diesen Fehler in der Konsole: GET http://localhost:3000/public/img/header.jpg 404 (Not Found) - jquery.js:9119

20
Luca Mormile

Um dieses Problem zu lösen, habe ich dieses Webpack hochgeladen . Sehr grundlegende Konfiguration , um meine Projekte zu starten. Ich hoffe, es kann jedem helfen, der dieses Problem hatte. Vorschläge sind natürlich willkommen.

1
Luca Mormile

Soweit ich sehe, verwenden Sie den CSS-Loader ("style", "css", "sass", "resolve-url") (Der "CSS" -Teil ist der "CSS-Loader").

In Ihrer (n) Sass-Datei (en) sollten Sie mit einem relativen Pfad von der Sass-Datei, die Sie bearbeiten, auf die Bilder verlinken.

styles
 - somefile.scss
 - another.scss
images
 - someImage.jpg

in somefile.scss sollten Sie wie folgt auf Ihr Bild verlinken:

background-image: url("../images/someImage.jpg);

Beachten Sie, dass Sie, wenn Sie möchten, dass Webpack diese Bilder in Ihren Distributionsordner verschiebt (wenn Sie ein solches System verwenden), etwas wie file-loader Benötigen, um diese Dateien zu kopieren.

6
Wout De Rooms

Sie können Ignore-Loader verwenden, wenn sich Ihre Bilder bereits an der Stelle befinden, an der Sie sie benötigen. file-loader kopiert die Dateien in Ihren Ausgabeordner.

1
Lukas Winter