Webpack sass-loader: How to correctly use fonts?

So I have the following font setup:

$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');
}

The build (with vue.js webpack btw) works as expected. The app won't be able to load the fonts though. the src urls point to the wrong directory. When changing the $font-path to the folder relative to the output file (as suggested), the build fails because it can't find the fonts.