Static GitHub Issues

[897] Including fonts in styles

prev: ssr custom directive
next: Nuxt doesn't generate the nested routes example correctly

There might be a solution for this, but I have looked through all the issues and could not find mention of this particular issue (though https://github.com/nuxt/nuxt.js/issues/872 might be relevant).

In my assets/styles/global.scss file I reference fonts stored at assets/fonts/keiser.

@font-face {
    font-family: "Keiser";
    src: url("~assets/fonts/keiser/keiser-webfont.eot");
    src: url("~assets/fonts/keiser/keiser-webfont.eot") format("embedded-opentype"), 
    url("~assets/fonts/keiser/keiser-webfont.woff") format("woff"), 
    url("~assets/fonts/keiser/keiser-webfont.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

Which then results in this error:

 error  in ./assets/fonts/keiser/keiser-webfont.woff

Module parse failed: D:\Development\Keiser\Keiser.Metrics\Keiser.Metrics.Web\assets\fonts\keiser\keiser-webfont.woff Unexpected character ' ' (1:8)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)

 @ ./~/css-loader?sourceMap!./~/sass-loader/lib/loader.js?sourceMap!./assets/styles/global.scss 6:281-331
 @ ./assets/styles/global.scss
 @ ./~/babel-loader/lib?{"presets":["vue-app"],"babelrc":false,"cacheDirectory":true}!./~/vue-loader/lib/selector.js?type=script&index=0!./.nuxt/App.vue
 @ ./.nuxt/App.vue
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi webpack-hot-middleware/client?reload=true ./.nuxt/client.js

We would normally use resolve-url-loader to solve this issue. I see that there are a few ways to override loaders, but none of the ones I tried would work (and most seemed to be ignored for this file). Is there a method for overriding the loader for this file?

<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c767">#c767</a>)</em></sub></div>