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

Question

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'
      }
   ]
}

try this way <style lang="scss"> @import 'src/assets/css/materialize.css'; </style> — Tony Tom
– Tony Tom, Commented Mar 28, 2019 at 4:36
I get the following error: "Cannot find module './Namesearch.vue?vue&type=style&index=0&lang=scss&'" — Slins
– Slins, Commented Mar 28, 2019 at 5:09
When I revert <style lang="scss"> to just <style> the error is fixed — Slins
– Slins, Commented Mar 28, 2019 at 5:38

Aldarund · Accepted Answer · 2019-03-28 10:40:53Z

3

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'
  ]
}

answered Mar 28, 2019 at 10:40

Aldarund

17.6k6 gold badges76 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Slins Over a year ago

I imported it through postcss and it works fine, thanks! I don't want to import it globally because it would be loaded on every page, which wouldn't be necessary

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related