Webpack - sass loader cannot find images

Question

The sass loader doc says: "If you're just generating CSS without passing it to the css-loader, it must be relative to your web root". So i did as it tells, I have my index.html in my project root, then I'm trying to load an image from my scss file. Now I have 2 errors: 1) from Chrome's console: Cannot find module "./img/header.jpg". 2) from my 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]"
          }
        ]
    }
};

If I see my code, I can clearly see that my css lives inside <head> so I've pointed my image's path to my root, as documentation says, but still can't fix it.

UPDATE: I've installed file-loader and followed the instructions, now I get this error in console: GET http://localhost:3000/public/img/header.jpg 404 (Not Found) - jquery.js:9119

The issue could be with the bower_components directory maybe? I had a similar issue here with fonts: http://stackoverflow.com/questions/33733370/webpack-cannot-load-fonts-from-bower-using-css-scss — Zorgatone, Nov 28 '15 at 22:23
I am facing similar issue. I have installed url-loader, file-loader but still I am gietting an error http://localhost:8080/97e0c94dad5b497783b1400e27dfdcbb.jpg 404 (Not Found) — Shubham Agarwal Bhewanewala, Jul 13 '18 at 10:02

score 6 · Answer 1 · answered Nov 28 '15 at 15:11

6

As far as I can see you are actually using the css loader ( "style", "css", "sass", "resolve-url" ) (the "css" part is the "css-loader")

In your sass file(s) you should link to the images using a relative path from the sass file you are editing.

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

in somefile.scss, you should link to your image like this:

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

Do note, that if you want webpack to move those images to your distribution folder (if you are using a system like this) that you will need something like file-loader to copy those files over.

answered Nov 28 '15 at 15:11

Wout De Rooms

647
4
10

I've tried to point my scss file to my img folder doing url( ../img/header.jpg) but this time I get this other error: ERROR in ./public/img/header.jpg Module parse failed: C:\Web-Development\React\Portfolio\public\img\header.jpg Line 1: Unexpected token ILLEGAL You may need an appropriate loader to handle this file type. (Source code omitted for this binary file) @ ./~/css-loader!./~/sass-loader!./~/resolve-url-loader!./public/css/header.scss 6:64-92 – Luca Mormile Nov 28 '15 at 15:44
That's why you need the file-loader. Just like for your scss files, you need to specify a test and a loader (in this case file-loader) – Wout De Rooms Nov 28 '15 at 15:46
Ok, I've added `{ test: /\.jpg$/, loader: "file?name=[path][name].[ext]" }` in my webpack.config.js but now in Chrome's console i get a different error: `GET http://localhost:3000/public/img/header.jpg 404 (Not Found) - jquery.js:9119`. I'm sorry for all these questions, I've just started in these days to use all of these tools – Luca Mormile Nov 28 '15 at 17:20
@LucaMormile great question and it seems like Wout has addressed the original problem? If so, marking it "accepted" is helpful for the community :) – Ben Apr 26 '16 at 21:52
Hi @Ben, apologies cause right now I can't try Wout's answer (no time to work on ReactJS :(( ), but I've just wrote an answer with a link to my webpack configuration file that solved my problem. – Luca Mormile Apr 27 '16 at 07:26

score 2 · Answer 2 · answered Apr 14 '16 at 17:44

2

You can use ignore-loader if your images are already in the place where you need them. file-loader will copy the files to your output folder.

answered Apr 14 '16 at 17:44

Lukas Winter

21
1

score 1 · Accepted Answer · answered Apr 27 '16 at 07:17

1

To solve this problem I've uploaded this webpack extremly basic configuration to start my projects, I hope it can help everyone who had this problem. Suggestions are all welcome of course.

answered Apr 27 '16 at 07:17

Luca Mormile

1,177
6
19
36

When you want to link to external resources, please add the relevant part here on Stackoverflow since the link could be unavailable. – richardaum Jul 31 '20 at 14:15

Webpack - sass loader cannot find images

3 Answers3

Linked