CODEWITHSUNDEEP
javascriptcssvue.jsnuxt.js
Slins
Slins

Reputation: 83

How to import CSS frameworks in Vue/Nuxt.js locally?

I have a couple of CSS frameworks stored in the assets folder of my project, I previously had them in the static folder and everything was working fine. However, I decided to switch over some files from the static to the assets folder, and I'm having trouble linking the stylesheet.

Inside the assets folder, there's a folder called "css", in which I store all the frameworks.

My goal is to link the frameworks to the components that depend on them, in the components folder. Previously, as mentioned, the stylesheets were in the static folder and worked fine.

However, every attempt I have made so far results in the "/* style not found */" page. The images, which are in the assets folder as well, inside a folder called "img", work fine.

I have attempted using the following links for the css:

"~/assets/css/materialize.css"

"~assets/css/materialize.css"

"@/assets/css/materialize.css"

"@assets/css/materialize.css"

"assets/css/materialize.css"

"/assets/css/materialize.css"

"css/materialize.css" (That's what I used to link when using the static folder)

Every attempt resulted in the same "/* style not found */" page, by following the link in the source code.

Here's the component's head:

head:{  
   link:[  
      {  
         rel:'stylesheet',
         type:'text/css',
         href:'~assets/css/materialize.css'
      }
   ]
}

Upvotes: 2

Views: 2463

Answers (1)

Aldarund
Aldarund

Reputation: 17621

In head you should reference only static resources, e.g. external ones or the ones that in the static folder. Assets folder isnt served by nuxt as static resource. Resource from it supposed to be imported. e.g. inside your components

import "~/assets/css/materialize.css"

Or inside style via postcss import

  <style>
    @import '~assets/css/materialize.css'
  </style>

Or globally via css property in nuxt config

export default {
  css: [
    '~/assets/css/materialize.css'
  ]
}

Upvotes: 3

Related Questions