😵‍💫 New object based style config for vite-plugin-vuetify makes vite reload the browser

[jd-solanki]

https://discord.com/channels/340160225338195969/660898563139567625/1017389451976114196 https://discord.com/channels/340160225338195969/660898563139567625/1017397616398577684 https://discord.com/channels/340160225338195969/660898563139567625/1017418502560305182

Reproduction repo: https://github.com/jd-solanki/vuetify-starter

This is reproduction repo for vite-plugin-vite regrading browser reloads due to new object based style config.

Steps

1. Run the project using yarn dev (It will use --force to clean the cached dependencies)
2. Visit the URL
3. Open the about page (😵‍💫 Browser reloads)

---

Using old config

However, if we use old config styles: 'expose' then it works fine.

1. use styles: 'expose' in vite config for vite-plugin-vuetify
2. Run the project using yarn dev (It will use --force to clean the cached dependencies)
3. Visit the URL
4. Open the about page (No reloads)

P.S. Images are attached in discord chat

[KaelWD]

I fixed the 404 with optimizeDeps.exclude.

I think vite doesn't force reload with "expose" because we remove all the stylesheet imports from the library, configFile still has them all it just rewrites them to a virtual file with the variables defined.

Your project setup is wrong btw, it duplicates styles:

diff --git a/src/main.ts b/src/main.ts
index 5d70e26..b29b964 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -4,7 +4,7 @@ import router from './router'

 import vuetify from '@/plugins/vuetify'
 import { loadFonts } from '@/plugins/webfontloader'
-import './styles/settings.scss'
+// import './styles/main.scss'

 loadFonts()

diff --git a/src/styles/main.scss b/src/styles/main.scss
new file mode 100644
index 0000000..c8672bd
--- /dev/null
+++ b/src/styles/main.scss
@@ -0,0 +1,6 @@
+@use 'vuetify' with (
+  $color-pack: false,
+  $utilities: false,
+  $border-radius-root: 16px,
+  $body-font-family: "Inter",
+);
diff --git a/src/styles/settings.scss b/src/styles/settings.scss
index 1519f8a..b933598 100644
--- a/src/styles/settings.scss
+++ b/src/styles/settings.scss
@@ -1,6 +1,6 @@
-@use 'vuetify' with (
+@use 'vuetify/settings' with (
   $color-pack: false,
   $utilities: false,
   $border-radius-root: 16px,
   $body-font-family: "Inter",
-);
\ No newline at end of file
+);
diff --git a/vite.config.ts b/vite.config.ts
index c193b35..d5d325f 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -15,5 +15,8 @@ export default defineConfig({
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))
     }
+  },
+  optimizeDeps: {
+    exclude: ['vuetify']
   }
 })

Comment out vuetify/styles and uncomment main.scss to switch to expose.

[jd-solanki]

Can you please make a new alpha release so I can test this?

[KaelWD]

Yeah my bad should be up now.