Nuxt Linking CSS Files in Head property from assets issue - vue.js

Question

I am trying to link my css files by using head property of nuxt in only one specific page like this:
head: {
link: [
{rel: 'stylesheet', href: require('~/assets/css/font.css')},
{rel: 'stylesheet', href: require('~/assets/css/style.css')},
]
}
After doing this when I load my page Everything is fine but I see this Error at Console
GET http://localhost:3000/[object%20Object] net::ERR_ABORTED 404 (Not Found)
and when I looked at source I saw that CSS Files were linked this way :
<link data-n-head="ssr" rel="stylesheet" href="[object Object]">
<link data-n-head="ssr" rel="stylesheet" href="[object Object]">
I need to import my CSS filed this way but I still have this problem, How can I solve this ?

Answer 1

If you want to call an asset in the head property you have to add/move it to the /static folder, which is publicly accessible, and then refer to it explicitly. This method doesn't minify the file(s).
head: {
link: [
{rel: 'stylesheet', type: 'text/css', href: '/css/font.css'},
{rel: 'stylesheet', type: 'text/css', href: '/css/style.css'}
]
}
Alternatively, you can leave it where it is and import it via #import between the <style> tags of the .vue file, without the initial forward slash.
<style scoped>
#import url('~assets/css/font.css');
#import url('~assets/css/style.css');
</style>
Source01 | Source02