CODEWITHSUNDEEP
vue.jsvuejs2nuxt.js
Mehdi Rafiee
Mehdi Rafiee

Reputation: 105

Nuxt Linking CSS Files in Head property from assets issue

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 ?

Upvotes: 6

Views: 12952

Answers (1)

ckhatton
ckhatton

Reputation: 1581

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

Upvotes: 15

Related Questions