title: SCSS - usage of image files with relative path are not working
body: <p>I have the following 4 files:</p>
  
  <pre><code>/src/images/image.png
  /src/scss/main.scss
  /src/scss/test/test.scss
  /src/js/entry.js
  </code></pre>
  
  <p>In <code>main.scss</code> I have the following code:</p>
  
  <pre><code> @import './test/test.scss';
  </code></pre>
  
  <p>In 'test.scss' I have the following code:</p>
  
  <pre><code> .test {
      background-image: url(../../images/image.png);
   }
  </code></pre>
  
  <p>And in 'entry.js' I have the following code:</p>
  
  <pre><code> import './../scss/main.scss'
  </code></pre>
  
  <p>When I try to build this project with webpack, I get an error, that the <code>image.png</code> file can not be resolved. It appears, that when I build this project, <code>test.scss</code> thinks that it's relative folder is <code>/src/scss/</code>. If I change <code>../../images/image.png</code> to <code>../images/image.png</code> everything works correctly.</p>
  
  <p>Is there any way to tell <code>webpack</code> or <code>sass-loader</code> to threat every imported file, as a separate file, and always use paths relative to the currently opened file? Or is there any way to specify paths from the root folder of my application (<code>/src</code> in this case)?</p>