Estoy desarrollando una biblioteca de componentes de interfaz de usuario usando Vue 3, SCSS y Webpack 5. La biblioteca consta de componentes de servidor (botón, entrada, formulario, etc.) que tienen un SCSS con alcance cada uno.

Después de instalar la biblioteca en mi proyecto principal (también creado con Vue 3 y Webpack 5), estoy importando solo un componente (botón) en él. Sin embargo, después de que finalizó la compilación (compilación CSS), veo que el CSS de otros componentes también se incluye en la compilación. Debo mencionar que el árbol JS se sacude y funciona.

Quiero reducir el tamaño de mi paquete para incluir solo el CSS de los componentes importados.

Un ejemplo para el componente de botón en mi archivo de compilación:

 var script$4 = defineComponent({ name: "SButton", props: { stype: { type: String, default: "primary" }, type: { type: String, default: "button" } } }); const _withId$4 = /*#__PURE__*/withScopeId("data-v-7a74475b"); const render$4 = /*#__PURE__*/_withId$4((_ctx, _cache, $props, $setup, $data, $options) => { return (openBlock(), createBlock("button", { class: ["s-button", _ctx.stype], type: _ctx.type }, [ renderSlot(_ctx.$slots, "default") ], 10 /* CLASS, PROPS */, ["type"])) }); var css_248z$6 = "html {\n --sbutton-general-icon-padding: 9px;\n --sbutton-general-icon-width: 36px;\n --sbutton-general-icon-height: 36px;\n --sbutton-width: 100%;\n --sbutton-min-height: 56px;\n --sbutton-line-height: 32px;\n}\n@media (min-width: 992px) {\n html {\n --sbutton-general-icon-padding: 7px;\n --sbutton-general-icon-width: 32px;\n --sbutton-general-icon-height: 32px;\n --sbutton-width: auto;\n --sbutton-min-height: 46px;\n --sbutton-line-height: 22px;\n }\n}"; styleInject(css_248z$6);