CSS part of Vue app is not rendered on dev server

Describe the bug The <style> part of SFC(Single File Component) is not rendered when launching Vue App using SWA CLI via dev server.

To Reproduce Steps to reproduce the behavior:

1. Create a new Vue app with npm init vite@latest my-vue-app --template vue
2. cd my-vue-app && npm i
3. Type in command swa start http://localhost:3000 --run "npm run dev"
4. Click on http://localhost:4280
5. Displaying HTML that does not reflect CSS written in <style> of App.vue (e.g. not centered)

Expected behavior The HTML with CSS is displayed as if it was started on the native dev server.

Screenshots

Start with SWA CLI (http://localhost:4280')

Start with Vite dev server (http://localhost:3000)

Desktop (please complete the following information):

• OS: Windows 11
• Browser Chrome
• Version [95.0.4638.69]

Additional context If run it from static files after build, like swa start dist, it will be rendered correctly.

[manekinekko]

We have fixed this issue in the next release. Will schedule a release soon.

[LHousehold]

I’m also experiencing this issue using Vite and SvelteKit. Due to another issue described here, I had to temporarily downgrade to 0.8.0 to get to this point. I thought I’d bring it up because it sounds very similar to what’s happening here.

I created a repo to recreate the issue: https://github.com/LHousehold/example-issue-azure-swa-sveltekit

The repo’s readme describes the issue, but basically it seems like the file with the relevant CSS is not being loaded because Vite uses query params which route to different content.

http://localhost:3000/src/routes/index.svelte?svelte&type=style&lang.css When accessed directly and working correctly, the above returns different content than the below, as if they are completely different files. http://localhost:3000/src/routes/index.svelte

But when using the cli with port 4280, these two paths both return only the content from /index.svelte without the query params. I suspect k-miyake is facing a similar issue.