vite lib mode sass scoped issue for vue3

[lastube]

A set of general components needs to be packaged using Vite's library mode. Once the packaging is complete, these components will be uploaded to the server. On a separate host page, a JSON file will be remotely loaded to obtain the description of these components. Then, through a <script> tag, the JS file containing the packaged library will be loaded. The components will then be globally registered using app.component and can be rendered on the host page.

There are two issues:

When the general components are rendered on the host page, their DOM structure’s scope ID is removed, but the CSS properties with the scope ID selector still remain in the page’s CSS (due to cssCodeSplit: true), causing the styles to fail.
If the general components are exported using asynchronous loading (defineAsyncComponent), Vite's library mode doesn't handle it well. It only exports one file, and the child components are not individually generated as separate files.
In the Vue 2.0 era, this could be easily achieved, but now, it's not working. How can I solve this issue?

Even with webpack + Vue 3.0, I’m still unable to resolve it.