title: webpack: can't build correct font paths
body: <p>I have a vue.js project - I used the webpack template.</p>
  
  <p>We have custom fonts. I referenced them in my scss as follows:</p>
  
  <pre><code>$font-path: '~@/assets/fonts/';
  @font-face {
      font-family: 'someFont';
      src: url('./#{$font-path}someFont/someFont.eot') format('eot'),
      url('./#{$font-path}someFont/someFont.woff2') format('woff2'),
      url('./#{$font-path}someFont/someFont.woff') format('woff'),
      url('./#{$font-path}someFont/someFont.ttf') format('truetype');
      font-weight: 200;
      font-style: normal;
  }
  </code></pre>
  
  <p>The build works great - the fonts are placed in <code>dist/static/fonts</code>. The problem although is, that the upper scss has the wrong reference: 
  <code>https://.../projectXY/static/css/static/fonts/someFont.woff2</code>,
  which should be <code>https://.../projectXY/static/fonts/someFont.woff2</code>.</p>
  
  <p>We didn't change any webpack config stuff, so it looks like this: </p>
  
  <pre><code>{
      test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
      loader: 'url-loader',
      options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[ext]')
      }
  }
  </code></pre>
  
  <p>What do I have to change to make it work?</p>