Adding css to head data from page not working

[marcodeluca]

Hey seems like this should be straightforward but I can't seem to get stylesheets added to the page from the SRC dir. It only works with files in the public dir. Am I missing something, or is this the only way it works?

This does not work to add stylesheets to the head (in any computation, i've tried using ./ or ~/ or ~@, so it's not something like a bad path:

metaInfo: {
title: 'About us',
meta: [
{ name: 'author', content: 'John Doe' }
],
link: [
{ rel: 'stylesheet', href: '/assets/css/catalogue.css' },
]
// etc...
}

The solutions below work at the page level:

<style src="~/assets/css/catalogue.css"></style>

<style scoped>
  @import '~@/assets/css/catalogue.css';
...
</style>

[TerabyteTiger]

Hi @marcodeluca,

I dug into this a bit and was able to recreate this with a console error of

Refused to apply style from 'http://localhost:8080/about/assets/css/example.css'
because its MIME type ('text/html') is not a supported stylesheet MIME type, and
strict MIME checking is enabled.

If this is the error you're also seeing, it appears to be caused by Webpack compiling all the files in src into .js and .html files, then requesting the file as a .css file.

Unless someone else pops in to correct me, I believe the docs meant to indicate that the /assets/css folder should be located under static and not src. I was able to properly import the file using link: [{ rel: "stylesheet", href: "/css/example.css" }] with the file being located in my directory at static/css/example.css.

[marcodeluca]

@12vanblart yep that's the same thing I see. The docs could probably be updated to add a note about loading css from the static folder, OR maybe there should be a way to compile CSS properly.

I noticed that when in development, loading CSS from the static folder is delayed, causing a flicker or whatever you want to call it where CSS styles are not applied right away. I'm guessing/hoping this is only in development and would not be an issue after building the static site...

I'm using this approach now:

<style scoped> @import '~@/assets/css/catalogue.css'; ... </style>

Im not sure how any of that will work with the @gridsome/plugin-critical that extracts & inlines critical-path (above-the-fold) CSS. Havent tested that yet:)

Thanks @12vanblart !

[TerabyteTiger]

OR maybe there should be a way to compile CSS properly.

I believe the issue we're seeing here is coming from the Webpack level, not from Gridsome.

I noticed that when in development, loading CSS from the static folder is delayed

There's always potential that this would still occur after building for files in the static folder since the static folder isn't being compiled into condensed files.

Since you're using <style scoped>, do you have a reason or restriction that would prevent you from including your CSS directly in the page.vue file instead of in a separate CSS file?

[marcodeluca]

Yah, I've just started converting a static site with 300+ pages. There are 5 different types of pages, so on top of the main stylesheet, there are maybe 30 'catalogue' pages, 100 or so 'product pages' etc. So each of those page types has a stylesheet that isolates elements unique to it. And then each page will have sections that are the same across many pages or the entire site like headers and footers.

First couple days into Gridsome so just sorting it all out:) The goal is page load speed and content management efficiency. So between templates, collections, pages, layouts and components, I'm sorting out where to put our JS and CSS resources so nothing is repeated and nothing unnecessary is loaded.

[TerabyteTiger]

I would probably start by trying the <style scoped> @import '~@/assets/css/catalogue.css'; ... </style> approach, then once everything is functioning, try refactoring the CSS into the file directly if you're still seeing the flash of unstyled content.

[mtlynch]

Just want to check status here.

@marcodeluca - Is this issue still open or has @12vanblart's solution resolved your problem?

[mtlynch]

No response, so I'm assuming this is closed, but feel free to reopen if I'm mistaken.