CSS part of Vue app is not rendered on dev server
See original GitHub issueDescribe 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:
- Create a new Vue app with
npm init vite@latest my-vue-app --template vue
cd my-vue-app && npm i
- Type in command
swa start http://localhost:3000 --run "npm run dev"
- Click on http://localhost:4280
- Displaying HTML that does not reflect CSS written in
<style>
ofApp.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.
Issue Analytics
- State:
- Created 2 years ago
- Comments:8 (6 by maintainers)
Top Results From Across the Web
Webpack issues rendering CSS in Vue when *not* using CLI
I've been stuck for hours and cannot figure out how to render the CSS in the < style > tags of a component's...
Read more >Server-Side Rendering (SSR) - Vue.js
Synchronous being the key word there. If your app starts with a loading spinner, then fetches content via Ajax, the crawler will not...
Read more >Vue JavaScript Tutorial in Visual Studio Code
Vue JavaScript tutorial showing IntelliSense, debugging, and code navigation support in the Visual Studio Code editor.
Read more >Styling Vue components with CSS - Learn web development
Vue has three common approaches to styling apps: External CSS files. Global styles in Single File Components ( .vue files). Component-scoped ...
Read more >Server-Side Rendering - Vite
Vite provides built-in support for server-side rendering (SSR). The Vite playground contains example SSR setups for Vue 3 and React, which can be...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
We have fixed this issue in the next release. Will schedule a release soon.
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.