Nuxt.js: nuxt generate: CSS not included in head

Created on 30 Nov 2019 · 6Comments · Source: nuxt/nuxt.js

Version

v2.10.2

Reproduction link

https://github.com/lights0123/nuxt-css-issue

Steps to reproduce

yarn && yarn run generate

Then view dist/index.html, such as via npx serve dist

What is expected ?

The included CSS, assets/test.css, should be inlined into the page as a <style> element when generated into a static page, instead of being added by JS later.

What is actually happening?

Only CSS defined in a local <style> element is inlined. If Javascript is disabled, then this CSS never gets loaded, as it requires JS to include in the page. As per https://nuxtjs.org/faq/css-flash,

the CSS is separated and put in the header so this flash of unstyled content does not appear anymore

However, repeating this in a layout (i.e. putting import '~/assets/test.css'; in layouts/default.vue) works successfully, and the CSS is included in the generated HTML file.

Additional comments?

I remember this working fine a few months ago in a project I was working on. I changed a few things around, though, and this bug appeared.

bug-report stale

Source

lights0123

👍3

All 6 comments

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open: