Gatsby/React SASS Background-Image

Question

How to specify background image in global SASS stylesheet? Within the "src" folder I have a "sass" folder contain a stylesheet with the following:

background-image: url(../assets/test.jpg)

The "assets" folder is on the same level as the "sass" folder. I addition to the path above, I have also attempted using "./" and "../../" to no avail.

Error:

ERROR in ./src/assets/test.jpg 1:0 Module parse failed: Unexpected character '�' (1:0) You may need an appropriate loader to handle this file type.

Calling import image from '../assets/test.jpg' alone, without calling the file from within SASS also throws the error.

I believe I've discovered the cause of the problem; my include: value is not properly configured. Currently, I have all of my media files located within this /assets/ folder, and so it seems they are all being compiled as .svg files.

{
  resolve: `gatsby-plugin-react-svg`,
  options: {
    rule: {
      include: /assets/
    }
  }
}

Plugin issue is addressed at the bottom of its documentation. https://www.gatsbyjs.org/packages/gatsby-plugin-react-svg/?=gatsby-plugin-react-svg

Solved by renaming svg files and updating plugin settings include: /\.inline\.svg$/.

Do you have loader to handle .jpg from sass in your webpack.config.js ? — Pio
@Pio I receive the same error when calling directly from the js file. See update. — Ryan Prentiss
I had the same problem when I was importing a font file. (Unexpected character '�') So it looks a little strange. Show us your webpack.cofnig.js. And double check that you load good file — Pio
Hi there, do you happen to have modified webpack setting in gatsby-node.js or use any plugins that might have done so? — Derek Nguyen
@DerekNguyen List of plugins added. From my understanding, Gatsby comes configured with Webpack out the box to handle assets such as jpg, gif, svg, etc. gatsbyjs.org/docs/importing-assets-into-files/… — Ryan Prentiss

rdela rdela · Accepted Answer · 2019-05-09T06:39:17

Edit: While the below solution does work, it is not ideal for the reasons described in the Importing Assets Directly Into Files and Using the Static folder docs pages.

Importing assets directly has these benefits for image and font files:

Missing files cause compilation errors instead of 404 errors for your users.

Result filenames include content hashes so you don’t need to worry about browsers caching their old versions.

After OP added update about gatsby-plugin-react-svg misconfiguration causing the issue I went back and tried using an assets folder in src instead of static at the root level and everything works fine.

Original answer:

In the Importing Assets Directly Into Files docs page you link to in your comment it says up top:

There are two major ways to import assets, such as images, fonts, and files, into a Gatsby site. The default path is to import the file directly into a Gatsby template, page, or component. The alternative path, which makes sense for some edge cases, is to use the static folder.

You can create a folder named static at the root of your project. Every file you put into that folder will be copied into the public folder. E.g. if you add a file named sun.jpg to the static folder, it’ll be copied to public/sun.jpg

You can then refer to it in your stylesheet like so:

body {
  background-image: url(/puppy.jpg);
}

All that said, there is another similar question here where the OP answers their own question with a much more complicated solution, but if I were to answer that one I would suggest they move the fonts folder into the Static folder and follow a similar approach to the one outlined above.

Gatsby/React SASS Background-Image

1 Answers