title: Webpack Import Including Font Face with Relative Path
body: <p>In my Webpack configuration I'm defining one resource root for common files like this:</p>
  
  <pre><code>{
    loader: 'sass-loader',
    options: {
      includePaths: [
        'node_modules',
        'src/components/_common'
      ]
    }
  }
  </code></pre>
  
  <p>Now I'm having e.g. a file <code>_fonts.scss</code> in the resource root and can import it using <code>@import "fonts";</code>. This is working like a charm.</p>
  
  <p>However, if this file contains a <code>@font-face</code> directive that is written relative to <code>src/components/_common</code> (path like in the Webpack configuration above) the file loading of that font url won't work. Webpack isn't able to resolve this URL as it assumes that it's written based on the path of the actual file which imports <code>_fonts.scss</code>, which is not <code>src/components/_common</code>.</p>
  
  <p>So, my question is: Would it be possible that I write the path absolute from the beginning of the project, so that Webpack can always resolve it as it's no longer relative? I've tried it with no luck. Also I've tried specifying <code>resolve.modules</code> and <code>resolve.alias</code> with no luck too.</p>