Webpack - sass loader cannot find images

javascript css node.js webpack sass-loader

31,830

Solution 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.

Solution 2

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.

Solution 3

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.

31,830

Luca Mormile

Italian Frontend engineer with great passion for backend and mobile development.

Updated on July 09, 2022

Comments

Luca Mormile almost 2 years
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
- Zorgatone over 8 years
  
  The issue could be with the bower_components directory maybe? I had a similar issue here with fonts: stackoverflow.com/questions/33733370/…
- Shubham Agarwal Bhewanewala almost 6 years
  
  I am facing similar issue. I have installed url-loader, file-loader but still I am gietting an error localhost:8080/97e0c94dad5b497783b1400e27dfdcbb.jpg 404 (Not Found)
Luca Mormile over 8 years

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!./publ‌ic/css/header.scss 6:64-92
Wout De Rooms over 8 years

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)
Luca Mormile over 8 years

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
Ben about 8 years

@LucaMormile great question and it seems like Wout has addressed the original problem? If so, marking it "accepted" is helpful for the community :)
Luca Mormile about 8 years

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.
richardaum almost 4 years

When you want to link to external resources, please add the relevant part here on Stackoverflow since the link could be unavailable.