N
Nuxt•5mo ago
roderick1119

Development mode component styles generate <style> instead of <link rel="stylesheet">

Is it possible to configure Nuxt in development mode to generate <style> tags for component CSS instead of a <link> ? I see this behavior in the production build, however, the development build always generates <link> tags for global CSS files and SFC styles. 
<link rel="stylesheet" href="/_nuxt/assets/css/main.css" crossorigin>
<link rel="stylesheet" href="/_nuxt/pages/my/page/my-component.vue?vue&type=style&index=0&lang.css" crossorigin>
<link rel="stylesheet" href="/_nuxt/assets/css/main.css" crossorigin>
<link rel="stylesheet" href="/_nuxt/pages/my/page/my-component.vue?vue&type=style&index=0&lang.css" crossorigin>
2 Replies
kapa.ai
kapa.ai•5mo ago
Hi @roderick1119. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In Nuxt 3, the handling of CSS in development and production modes is intentionally different. By default: - Development mode: Nuxt uses <link rel="stylesheet"> tags for both global CSS and component (SFC) styles. This allows for faster hot module replacement (HMR) and a better developer experience. - Production mode: Nuxt inlines component styles as <style> tags in the HTML, while global CSS is typically included as a single <link> to a CSS file. You can control the inlining of styles using the features.inlineStyles option in your nuxt.config.ts. Setting this to true will inline both global and component styles as <style> tags, even in production. However, the knowledge sources do not explicitly state that this setting affects development mode—it's primarily documented as impacting production builds. In development, Nuxt prioritizes HMR and may not support full inlining of styles as <style> tags for all cases. Here’s how you would configure it: 
export default defineNuxtConfig({
  features: {
    inlineStyles: true
  }
})
export default defineNuxtConfig({
  features: {
    inlineStyles: true
  }
})
Nuxt config: features.inlineStyles
Upgrade guide: More Granular Inline Styles Summary:
- In production, you can control inlining with features.inlineStyles. - In development, Nuxt uses <link> tags for better HMR, and there is no documented way to force all styles to be inlined as <style> tags in dev mode. - If you need this behavior specifically in development, the knowledge sources do not provide a supported configuration for it. If you have a specific use case, you may need to look for a custom solution, but this is not covered in the official documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•5mo ago
<@699411590268715069> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?