Nuxt 3 with Vite - Importing a Specific SCSS File Loads All SCSS Files in Development Mode
Hi everyone,
I'm working on a project using Nuxt 3 with Vite, and I am facing an issue with dynamically importing SCSS files based on a variable. My goal is to import a specific SCSS file from the ~/assets directory, depending on the user's settings. However, when I use dynamic imports like this:
javascript
It seems to import all SCSS files within the ~/assets/theme/ folder instead of just the specific file. This issue occurs in development mode, where Vite seems to preload or cache all files matching the path pattern.
What I have tried so far:
Setting build.modulePreload to false in vite.config.js, but it didn't change the behavior.
Using the @vite-ignore directive, but it did not fully resolve the problem.
Changing the folder structure and placing SCSS files in the public directory. This works to some extent, but I lose the benefits of SCSS processing (like variables and mixins).
Questions:
Is there a way to configure Vite to only load the specific SCSS file that matches the dynamic import path?
Are there any plugins or custom middleware options that would help control how dynamic imports are handled in Vite when using Nuxt 3?
Is there a recommended approach to dynamically load SCSS files without preloading all files in a folder during development?
I'd appreciate any advice or solutions you might have!
Thank you!
1 Reply
If you could base the themes on CSS variables, swapping could be as easy as loading set of key-value pairs (as JSON from API endpoint) and applying them to
<body> or theme preview container.
The reason for my suggestion is that I find your approach quite unusual and potentially fighting with framework's base assumptions.