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:
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?
In my previous Nuxt 3.1.1 (Webpack) project, I used this inside a component:
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?
