CSS from SFC's is not supplied on SSR with the initial response

[Evertvdw]

I have been breaking my head the past 2 hours on a problem which I cannot wrap my head round. When I use unplugin-auto-import with Quasar (webpack) the css that I define in <style> tags inside SFC child components is no longer supplied with the SSR initial response.

I have no idea why but if I remove the unplugin-auto-import plugin from webpack, things work normally again. Luckely I was able to create a reproducing example, see here: https://codesandbox.io/s/fragrant-meadow-8g5dy?file=/src/components/TestComponent.vue

To see the problem:

• Open the browser from the sandbox in a new tab
• In this new tab, disable javascript (In chrome devtools you can do Ctrl + shift + p and type disable and you will see a Disable javascript command
• Reload the page, now the div in there with text This element should be red is not red
• If you inspect the source (Ctrl + u) you can see that there is no css imported

To make it work again:

• Comment out the lines in quasar.conf.js that add the plugin
• Restart the dev server and follow the steps above to see the difference.

What also makes it work again:

• Change the routes.js file, add import Index from 'pages/Index.vue at the top.
• Change component: () => import('pages/Index.vue') to component: Index

But this is not really an option because that would include Index in the main bundle and I want to be able to split that page into a seperate bundle, only loaded when required.

Do you have any idea what could be the problem here? I cannot see a logical reason for why this might happen but I don't have a knowledge of the plugin's internals and how it does what it does.