title: Gatsby how to import svg as background in scss correctly?
body: <p>I'm getting error message <code>Can't resolve '../../images/hero.svg'</code> while </p>
  
  <ol>
  <li><p>I'm trying to import svg image from <code>images folder</code></p></li>
  <li><p>and set it in <code>header.scss</code> as a background image:    <code>background-image: url('../../images/hero.svg');</code></p></li>
  </ol>
  
  <p>My gatsby structure:</p>
  
  <pre><code>├─ src
  ├── scss
  │   ├── main.scss
  │   ├── modules
  │   └──── header.scss
  └── images
      └── hero.svg
  </code></pre>
  
  <p>gatsby-config.js:</p>
  
  <pre><code>module.exports = {
    siteMetadata: {
      title: 'Test',
      description: 'test',
      author: '@gatsbyjs'
    },
    plugins: [
      'gatsby-plugin-react-helmet',
      {
        resolve: 'gatsby-source-filesystem',
        options: {
          name: 'images',
          path: `${__dirname}/src/images`
        }
      },
      'gatsby-transformer-sharp',
      'gatsby-plugin-sharp',
      {
        resolve: 'gatsby-plugin-manifest',
        options: {
          name: 'Test',
          short_name: 'test',
          start_url: '/',
          background_color: '#663399',
          theme_color: '#663399',
          display: 'minimal-ui',
          icon: 'src/images/android-chrome-192x192.png'
        }
      },
      'gatsby-plugin-sass',
      {
        resolve: 'gatsby-plugin-react-svg',
        options: {
          rule: {
            include: /\.inline\.svg$/
          }
        }
      }
      // this (optional) plugin enables Progressive Web App + Offline functionality
      // To learn more, visit: https://gatsby.dev/offline
      // `gatsby-plugin-offline`,
    ]
  }
  </code></pre>
  
  <p>Thanks.</p>