[Bug Report][3.10.1] Failed to load resource: the server responded with a status of 404 (Not Found) VApp.sass:1

[MrBeanCNX]

Environment

• Vue Version: 3.5.21
• Vuetify Version: 3.10.1,
• Vite Version: 7.1.5,
• Node Version: 22.14.0
• NPM Version: 8.15.0
• Package Manager: npm

Steps to reproduce

1. Create a new project using "npm create vuetify@latest".
2. Select Recommended preset and Vuetify 3 (Stable) (In my case, I got Vuetify version 3.10.1).
3. Use TypeScript.
4. Install dependencies by npm.
5. Install Dependencies.
6. Run the project for the first time by "npm run dev".
7. The application works correctly.
8. Close the browser.
9. Stop the dev server.
10. Modify any file in the project. (in my case I only added a single empty line to App.vue.)
11. Run the project again
12. Browser console shows error "Failed to load resource: the server responded with a status of 404 (Not Found) VApp.sass:1"
13. Vuetify styles fail to load. (UI styles are broken and The browser window is completely white.)
14. Reloading the page fixes the issue.

Expected Behavior

1. The project should continue to work normally after any code change.
2. Vuetify styles should not break after restarting the dev server.

Actual Behavior

1. Browser console shows error "Failed to load resource: the server responded with a status of 404 (Not Found) VApp.sass:1"
2. Vuetify styles fail to load. (UI styles are broken and The browser window is completely white.)
3. Reloading the page fixes the issue.

Image

Video

https://drive.google.com/file/d/1Tj-F4HBzTr1HUTX2DZcyR3FGqJhy8iKS/view?usp=drive_link

Reproduction Link

No reproduction link

[J-Sek]

Cannot reproduce on Linux, but I would rather suspect a glitch in MS Edge

[MrBeanCNX]

Cannot reproduce on Linux, but I would rather suspect a glitch in MS Edge

Thanks for the response.

I tested this on multiple machines in our team (Windows),
using both MS Edge and Google Chrome, and the same issue occurs.

The error is:
“Failed to load resource: 404 (Not Found) vapp.sass”

The issue appears on first load, but disappears after a manual reload.
This happens consistently across different machines and browsers.

It seems related to dev server / HMR or browser caching behavior rather
than a single Edge-only glitch.

Let me know if you need a minimal reproduction repo or more details.

[J-Sek]

Since it only really needs a page reload, it lands a bit low on the priority list for now. If you are determined enough, you could try to debug it further on your own. Beware you mentioned "I got Vuetify version 3.10.1" - it is not correct - the actual version can be checked in lockfile or by digging into node_modules. In order to ensure specific version, you can execute npm i vuetify@{version}. This would also let you jump between versions and see if it changes anything. Assuming you can pinpoint when it starts - it might be classified as something to be fixed in Vuetify, otherwise it most probably isn't.

[MrBeanCNX]

I’d like to share a more complete update after continuing to investigate this issue.

I’ve rechecked all related dependencies multiple times and couldn’t reproduce the problem with other libraries. The issue consistently points back to Vite itself.

After testing different versions, I found that the issue starts occurring with Vite 7.1.3 and above. When using Vite versions below that, the problem does not occur at all.

The failing request is always the same virtual module:

/@id/virtual:plugin-vuetify:components/VApp/VApp.sass

From the generated VApp.js, this virtual Sass module is imported directly:

import "/@id/virtual:plugin-vuetify:components/VApp/VApp.sass";

In dev mode, the browser sometimes requests this virtual module before it has been fully registered. When that happens, the dev server responds with a 404, and DevTools shows the resource as “not cached” or “unavailable”. A full page reload always resolves the issue, and the same module loads correctly afterward.

I also confirmed that disabling:

vuetify({
  autoImport: true,
  // styles: {
  //  configFile: 'src/styles/settings.scss'
  // }
})

prevents the issue from happening. I also noticed that disabling styles.configFile reduces Sass compilation overhead and results in faster initial UI rendering in the browser. However, this isn’t a viable long-term solution in my case. The styles.configFile option is required to override Vuetify’s default Sass variables at compile time, which is a core part of Vuetify’s styling concept.

I’ve also seen similar behavior in older projects dating back to the period when Vuetify transitioned from a Webpack-based setup to Vite as the primary tooling. The symptoms were very similar: intermittent issues with loading resources or virtual modules in dev mode, often resolved by a full page reload. In many cases, the issue would eventually disappear after updating Vite or related plugins.

From my experience, this pattern aligns with how Vite’s dev server and HMR work internally, especially when plugins inject virtual modules during the build/serve lifecycle. Compared to the previous Webpack-based setup, which had a more deterministic lifecycle, Vite’s on-demand module loading and HMR make timing-related race conditions more likely in certain plugin interactions.

Based on all of the above, this appears to be a race condition related to changes in Vite’s dev server behavior starting around version 7.1.3, affecting plugins that rely on virtual Sass injection (such as vite-plugin-vuetify). Vuetify seems to be affected by this interaction rather than being the direct cause.

I understand that this only affects dev mode and can be worked around by pinning Vite to an earlier version, but I wanted to share the full investigation in case it helps identify or track the underlying issue when using Vuetify together with Vite.

Thanks again for your time and for maintaining Vuetify.

Dependencies

├── @fontsource/roboto@5.2.7
├── @mdi/font@7.4.47
├── @tsconfig/node22@22.0.5
├── @types/node@22.19.5
├── @vitejs/plugin-vue@6.0.3
├── @vue/tsconfig@0.8.1
├── eslint-config-vuetify@4.3.4
├── eslint@9.39.2
├── npm-run-all2@8.0.4
├── pinia@3.0.4
├── sass-embedded@1.97.2
├── typescript@5.9.3
├── unplugin-auto-import@20.3.0
├── unplugin-fonts@1.4.0
├── unplugin-vue-components@29.2.0
├── unplugin-vue-router@0.15.0
├── vite-plugin-vue-layouts-next@1.3.0
├── vite-plugin-vuetify@2.1.2
├── vite@7.1.3 ==========================> Vite version >= 7.1.3 is the cause of the problem.
├── vue-router@4.6.4
├── vue-tsc@3.2.2
├── vue@3.5.26
└── vuetify@3.11.6