CSS file from public folder is not loaded correctly

[andschuetz]

Describe the bug

The following worked until we recently updated vite from 4.1.4 to 4.3.9.

We have a Vue app with multiple entry points (that is, different HTML files with further references).

One of those entry points uses <link...> to load a CSS file from a public directory, and an SCSS file from the client application's directory, which is dynamically processed. Seemingly, the CSS file from the public directory can no longer be loaded (while the SCSS file can be loaded). When the vue app is opened using vite preview, a white page is displayed.

Interestingly, the error message in the browser console states:

unsupported-f1d329ce.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)

even though no such .js file is supposed to be created.

Changing the CSS file's location to /src/ClientApp/... solves the issue. This step can be reconstructed using the stackblitz repro. For reference: the entry point in question is called unsupported.html.

Another entry point (the main index.html) however has no such issue loading the same CSS file from the public directory. The difference here is, however, that no further SCSS file is directly loaded, but rather a vue file is included which in turn imports an SCSS file.

Reproduction

https://stackblitz.com/edit/vitejs-vite-py4kuh?file=src%2Funsupported.html

Steps to reproduce

run vite build and
vite preview

in the stackblitz repro

System Info

from Stackblitz:

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 7.17.0 - /usr/local/bin/npm
  npmPackages:
    @vitejs/plugin-vue2: ^2.2.0 => 2.2.0 
    vite: ^4.3.9 => 4.3.9

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• vitejs-vite-py4kuh (Open reproduction)

[github-actions]

Hello @andschuetz. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with need reproduction will be closed if they have no activity within 3 days.

[patak-dev]

Hey @andschuetz, please update the reproduction or close and create a new issue. The CSS from public seems to be loading ok if you change /public/style/theme_standard.css to /public/style/theme-standard.css. You should also not use /public/ in the <link> tag.
And you should access the page at /unsupported.html: https://stackblitz.com/edit/vitejs-vite-2mzsmr
Please try to remove custom root, public, and server API config from your repro so it is easier for others to check the issue later too. Thanks!

[andschuetz]

Hi @patak-dev, Thanks for your comments and sorry for the wrong paths in the repro.

I have updated the repro (same URL https://stackblitz.com/edit/vitejs-vite-py4kuh?file=src%2Funsupported.html), removed unnecessary config, and also removed the /public/ part of the CSS path in unsupported.html.

The described error still occurs.

[patak-dev]

Thanks @andschuetz. I've created a new issue with a simplified reproduction (no sass) here:

• index.html without JS breaks multi-page app setup linking to the same stylesheet #13436

Let's continue tracking it there