title: Webpack sass-loader: How to correctly use fonts?
body: <p>So I have the following font setup:</p>
  
  <pre><code>$font-path: '~@/assets/fonts/';
  @font-face {
      font-family: 'mainFont';
      font-weight: 300;
      font-style: normal;
      src: url('#{$font-path}mainFont/mainFont.eot') format('eot'),
      url('#{$font-path}mainFont/mainFont.woff2') format('woff2'),
      url('#{$font-path}mainFont/mainFont.woff') format('woff'),
      url('#{$font-path}mainFont/mainFont.ttf') format('truetype'),
      url('#{$font-path}mainFont/mainFont.svg#mainFont') format('svg');
  }
  </code></pre>
  
  <p>The build (with vue.js webpack btw) works as expected. The app won't be able to load the fonts though. the <code>src</code> urls point to the wrong directory.
  When changing the <code>$font-path</code> to the folder relative to the output file (<a href="https://github.com/webpack-contrib/sass-loader#problems-with-url" rel="noreferrer">as suggested</a>), the build fails because it can't find the fonts.</p>