Best practice to create a component library with vue

Currently (and also the last months) I found only tedious knowledge about how to create a component library with VueJS. I found tons of articles that were either outdated or left out basic features.

The best I found so far was a CLI to create component libraries: https://github.com/team-innovation/vue-sfc-rollup

This is a very good base, but it still uses the depricated node-sass instead of sass: https://www.npmjs.com/package/sass

And what I see as the biggest problem is that with vue-sfc-rollup you can't work with sass directly in the vue components. For example <style scoped lang="scss"> will not work. But it should, because you want to load component related styles only once the component is loaded. Here, you should definitely take automated care that the component styles are loaded only 1 time in the DOM, even if the component is loaded 100 times.

It would also be helpful if you could specify a sass / scss file that is ALWAYS loaded (for example to load a reset.css or normalize.css) and a sass / scss file that is always loaded when a component is loaded from the libary (could for example contain css variables that are necessary for the components).

This would massively reduce CSS overhead, developers would be more willing to invest time in developing high quality component libraries (which should greatly expand the ecosystem in a short time) and the performance of Vue applications would look much more attractive on paper.

If these problems can be solved, I would recommend to contact the developers of vue-sfc-rollup if they would be interested in integrating their CLI directly into the VueCLI. Or allow to integrate them. Similar to what is possible with Angular, for example: https://angular.io/guide/creating-libraries (Which works wonderfully, by the way. I have already created several libraries with it and had a lot of fun developing them).

Start by reviewing the linked vue-sfc-rollup project and Vue CLI's library guidance to determine whether this belongs in the documentation or requires tooling changes. Done should be a current, documented component-library workflow covering Sass in Vue components, one-time style loading, and configurable always-loaded styles.