Nuxt.js: Including fonts in styles

[bayssmekanique]

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?

_{This question is available on Nuxt.js community (#c767)}

[alexchopin]

It should work, we use it in the webpack config by default

[bayssmekanique]

I see what you are saying @alexchopin, so I did some additional digging and found a really strange bug. Including the fonts threw the above error when I didn't have a build property in my nuxt.config.js export. Even just a blank build: {}, caused the url-loader to suddenly start working, while removing it caused the loaders to start throwing errors when trying to include the fonts. I haven't noticed any other loaders that were affected, though I don't include any other static resources aside from fonts.

[justyeh]

you can add a global css in nuxt.config.js

// Global CSS
  css: ['~assets/css/main.css', '~assets/css/font-awesome.min.css']

[judgeou]

build: {} really work

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.