Sōta
SPA Loading Template inline external CSS
Hey 👋
is there a way to include an external css file or a library like
animate.css with the spa-loading-template.html? I have tried adding it to the app.vue and the nuxt.config.ts in which it worked, but only after the page loaded the styles, which results in a layout shift and/or it doesn't play the desired animation.
Which is to be expected, because SSR is turned off and the styles are not inlined. Is there an already established solution to inline it? I have tried using @nuxtjs/critters, which only works in the production build and duplicates the css.
I also encountered another issue, that the template itself won't be minified, where as everything else was, but this isn't as big of a deal.
I have tried searching for a solution the past couple of days, like using another framework the generate the desired file, but I couldn't find a "perfect" solution.
Related GitHub issue: https://github.com/nuxt/nuxt/issues/30450
StackBlitz: https://stackblitz.com/github/sotasan/descriptive-kittens7 replies