title: Gatsby/React SASS Background-Image
body: <p>How to specify background image in global SASS stylesheet? Within the "src" folder I have a "sass" folder contain a stylesheet with the following:</p>
  
  <pre><code>background-image: url(../assets/test.jpg)
  </code></pre>
  
  <p>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.</p>
  
  <p><strong>Error:</strong></p>
  
  <p><code>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.</code></p>
  
  <p>Calling <code>import image from '../assets/test.jpg'</code> alone, without calling the file from within SASS also throws the error.</p>
  
  <hr>
  
  <p>I believe I've discovered the cause of the problem; my <code>include:</code> value is not properly configured. Currently, I have all of my media files located within this <code>/assets/</code> folder, and so it seems they are all being compiled as <code>.svg</code> files.</p>
  
  <pre><code>{
    resolve: `gatsby-plugin-react-svg`,
    options: {
      rule: {
        include: /assets/
      }
    }
  }
  </code></pre>
  
  <p>Plugin issue is addressed at the bottom of its documentation.
  <a href="https://www.gatsbyjs.org/packages/gatsby-plugin-react-svg/?=gatsby-plugin-react-svg" rel="nofollow noreferrer">https://www.gatsbyjs.org/packages/gatsby-plugin-react-svg/?=gatsby-plugin-react-svg</a></p>
  
  <hr>
  
  <p>Solved by renaming svg files and updating plugin settings <code>include: /\.inline\.svg$/</code>.</p>