N
Nuxt•3w ago
konsav

How to lazy-load SCSS when a component renders

Hey everyone! I need some help with dynamically loading CSS in Nuxt 3 using Vite. In my previous Nuxt 3.1.1 (Webpack) project, I used this inside a component: 
mounted() {
  import("@/assets/css/Footer/async.scss");
}
mounted() {
  import("@/assets/css/Footer/async.scss");
}
It worked great to lazy-load the SCSS only when the component was mounted, keeping it out of the initial bundle. Now in Nuxt 3.15 + Vite: - import("@/assets/css/Footer/async.scss") no longer works — Vite doesn’t support dynamic style imports. - If I include the SCSS in the <style> block of the component, it gets bundled with the main CSS. I want to load the scss only when the component is rendered. Any suggestions on how to achieve lazy style loading with Nuxt 3 and Vite?
2 Replies
kapa.ai
kapa.ai•3w ago
Hi @konsav. 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 with Vite, the approach for lazy-loading styles is different from what you used in your Webpack-based project. Vite handles CSS imports differently, and the dynamic import pattern you were using isn't supported in the same way. Here are some approaches you can use to lazy-load SCSS in Nuxt 3 with Vite: 1. Use Lazy Components with Hydration Strategies Nuxt 3 provides built-in lazy hydration strategies that can help with performance optimization. You can create a lazy component and use one of the hydration strategies to delay loading until needed: 
<template>
  <div>
    <LazyMyFooterComponent hydrate-on-visible />
  </div>
</template>
<template>
  <div>
    <LazyMyFooterComponent hydrate-on-visible />
  </div>
</template>
This will only hydrate (and load) the component when it becomes visible in the viewport. The styles associated with the component will only be loaded at that point. Nuxt documentation provides several hydration strategies: - hydrate-on-visible: Hydrates when visible in viewport - hydrate-on-idle: Hydrates when browser is idle - hydrate-on-interaction: Hydrates after user interaction - hydrate-after: Hydrates after a specified delay 2. Use External Stylesheets with Programmatic Loading If you need more control, you can dynamically add a stylesheet link to the document head when your component mounts: 
<script setup>
onMounted(() => {
  useHead({
    link: [{ rel: 'stylesheet', href: '/css/footer.css' }]
  })
})
</script>
<script setup>
onMounted(() => {
  useHead({
    link: [{ rel: 'stylesheet', href: '/css/footer.css' }]
  })
})
</script>
This approach requires you to extract your SCSS into a separate file that gets compiled to CSS during the build process. 3. Preprocessor Configuration For your SCSS files, make sure you have the proper configuration in your nuxt.config.ts: 
export default defineNuxtConfig({
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@use "~/assets/_variables.scss" as *;'
        }
      }
    }
  }
})
export default defineNuxtConfig({
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@use "~/assets/_variables.scss" as *;'
        }
      }
    }
  }
})
This won't directly help with lazy loading, but ensures your SCSS is properly processed. Important Note The knowledge sources don't provide a direct equivalent to your previous Webpack approach for dynamically importing SCSS files in Vite. This is because Vite handles CSS differently - it treats CSS imports as side effects during the build process rather than as dynamic modules that can be loaded at runtime. If you need more specific solutions, you might want to explore Vite plugins that specifically address lazy CSS loading, but these aren't covered in the provided knowledge sources. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3w ago
<@900420997872767070> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?