Allow extract css files specified in 'css' option

[yaquawa]

Describe the feature

Currently, the CSS files specified in the css option are injected using JavaScript. It would be beneficial if these CSS files could be extracted and utilized through the link element instead.

The reason behind this request is that my CSS file is quite large, and by not using the element, the styles are not displayed immediately during the page load.

I understand that I can use the app.head.link option, but unfortunately, this doesn't include the compilation of SCSS files, and I am unable to benefit from assets compiling.

Additional information

• [ ] Would you be willing to help implement this feature?
• [ ] Could this feature be implemented as a module?

Final checks

• [X] Read the contribution guide.
• [X] Check existing discussions and issues.

[rikyotei]

Totally agree, Inline CSS should not be the only option.

[yaquawa]

Is there a temporary workaround available for this issue in the meantime?

[rikyotei]

Is there a temporary workaround available for this issue in the meantime?

Downgrade to 3.5.3

[dargmuesli]

Related: https://github.com/vitejs/vite/pull/11864

[rikyotei]

Is there a temporary workaround available for this issue in the meantime?

https://nuxt.com/docs/guide/going-further/experimental-features#inlinessrstyles

[danielroe]

Would you try this?

export default defineNuxtConfig({
  features: {
    inlineStyles: id => !id?.includes('entry')
  }
})

This should avoid inlining the entry CSS (i.e. global CSS) but still inline any individual CSS from components.