Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

CSS part of Vue app is not rendered on dev server

See original GitHub issue

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.


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:closed
  • Created 2 years ago
  • Comments:8 (6 by maintainers)

github_iconTop GitHub Comments

manekinekkocommented, May 18, 2022

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

LHouseholdcommented, Nov 26, 2021

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:

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.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found