title: Webpack 4 with sass-loader & resolve-url-loader - Image paths not being found
body: <p><em>Minimally reproducible setup here: <a href="https://github.com/jamesopti/webpack_playground/tree/resolve_url_loader_issue" rel="noreferrer">https://github.com/jamesopti/webpack_playground/tree/resolve_url_loader_issue</a></em></p>
  
  <p>Im trying to use <code>resolve-url-loader</code> to add a hashname to my scss <code>url()</code> image paths, but I'm having a heck of a time getting it to work with webpack 4.
  I have a bunch of images in <code>/static/img/**</code> which are referenced in my SCSS like:</p>
  
  <pre><code>span.arrow {
    background: url(/static/img/audiences.png);
  }
  </code></pre>
  
  <p>Which is ending up in my css as exactly the same thing (resolve-url-loader isnt finding them)</p>
  
  <p>When I run the following configuration through webpack, I see that resolve loader is finding the right <code>url()</code> and its path, but debug mode is saying NOT FOUND.</p>
  
  <pre><code>resolve-url-loader: /static/img/audiences.png
    /Users/usr1/webpack_playground/src
    /Users/usr1/webpack_playground/static/img
    NOT FOUND
  </code></pre>
  
  <p>Is there some output config thats not correct? I've tried various combinations of the settings to no avail:</p>
  
  <pre><code>  loader: 'resolve-url-loader',
    options: {
      debug: true,
      root: path.join(__dirname, './static/img'),
      includeRoot: true,
      absolute: true,
    },
  </code></pre>
  
  <p>My end goal is for file-loader to transform them to the /dist hashed version:</p>
  
  <pre><code>span.arrow {
    background: url(/static/img/audiences-dhsye47djs82kdhe6.png);
  }
  </code></pre>
  
  <p>// Webpack rules config</p>
  
  <pre><code>rules: [
        {
          test: /\.(png|jpg|gif)$/,
          include: [
            path.resolve(__dirname, './static/img'),
          ],
          use: {
            loader: 'file-loader',
            options: {
              name: '[name]-[hash].[ext]',
            },
          },
        },
        {
          test: /\.svg$/,
          use: {
            loader: 'svg-inline-loader',
            options: {
              name: '[name]-[hash].[ext]',
            },
          },
        },
        { test: /\/src\/js\/(?:.*)\.css$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader' } ] },
        {
          test: [/\.scss$/, /\.sass$/],
          use: [
            MiniCssExtractPlugin.loader,
            {
              loader: 'css-loader',
              options: {
                sourceMap: true,
              },
            },
            {
              loader: 'resolve-url-loader',
              options: {
                debug: true,
                root: './static/img',
                includeRoot: true,
              },
            },
            {
              loader: 'sass-loader',
              options: {
                outputStyle: 'compressed',
                sourceMap: true,
                includePaths: [
                  './src'
                ],
              },
            },
          ],
        },
  ]
  </code></pre>