Gatsby: `This relative module was not found:` when using a background image in CSS

[IainIsCreative]

Description

When trying to use a background image in CSS (or Sass, even) like so:

body {
  background: url(images/hero-placeholder.jpg) left top repeat;
}

This should be correct as the image is relative to the root in the Gatsby site in public. The entirety of my Sass work is imported into the main template file using import '../../styles/style.scss' and uses gatsby-plugin-postcss-sass to process the Sass.

However, supposedly correct path or not, even if the image exists in public/images, this results in the following error:

 ERROR  Failed to compile with 1 errors                                                                                                                                                                 16:20:57

This relative module was not found:

* ./images/hero-placeholder.jpg in ./~/css-loader!./~/postcss-loader!./~/sass-loader?{"plugins":[],"postCssPlugin":[{"version":"6.0.16","plugins":[null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null],"postcssPlugin":"postcss-cssnext","postcssVersion":"6.0.16"},{"version":"5.2.18","plugins":[null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null],"postcssPlugin":"cssnano","postcssVersion":"5.2.18"}],"precision":8}!./styles/core/style.scss

Environment

Gatsby version: 1.1.27
Node.js version: 8.1.4
Operating System: MacOS High Sierra

Expected behavior

The Sass should generate the CSS as well as reference the image file as a background image.

Steps to reproduce

1. Place an image under static/images. (For some reason when outputting to public, it places it under images and not static/images(??))
2. Make a Sass file and import it into a js component/page/template file.
3. Use gatsby-plugin-postcss-sass for CSS processing.
4. Use the image under static/images as a background-image: in your Sass.
5. You should receive the error at this point.

[IainIsCreative]

I'm closing this as I didn't realise doing this via CSS loaders in webpack requires you to link directly to the where the image is placed in the repository and not relative to its output in public. Instead, it should be:

// Image is a few levels up and in the `static` directory
background: url('../../static/images/hero-placeholder.jpg') left top repeat;

This is how it feels when I realised this.

Issue closed.

[rossthedevigner]

@IainIsCreative I'm facing something similar, did you by chance run across an error like this:

Loader /Users/me/gatsby-site/node_modules/url/url.js?{"limit":10000,"name":"static/[name].[hash:8].[ext]"} didn't return a function
 @ ./~/css-loader!./~/sass-loader?{"plugins":[]}!./src/layouts/layout.scss 6:121-156 6:243-278

My .jpg is in static/

[sandys]

@rossthedevigner we are getting similar errors with node version 9+. It worked when we used node 8.11.1

P.S. you need to DELETE node_modules and install from scratch