Nuxt Linking CSS Files in Head property from assets issue

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 ?

remove require ... use like this {rel: 'stylesheet', href: '~/assets/css/font.css'}, — K.B, Mar 15 '21 at 14:39
If I remove require styles wouldn't be added properly It doesn't works that way — Mehdi Rafiee, Mar 15 '21 at 14:47
it will work ... is ur assets and nuxt cofig in same folder? — K.B, Mar 15 '21 at 14:49
I tried that before posting this issue here, if I remove require it will be linked this way : and it doesn't work — Mehdi Rafiee, Mar 15 '21 at 14:55

ckhatton · Accepted Answer · 2021-09-30T12:17:53.290

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

Nuxt Linking CSS Files in Head property from assets issue

1 Answers1

Linked