I'm developing a UI component library using Vue 3, SCSS and Webpack 5. The library consists of serval components (button, input, form etc) having a scoped SCSS each.

After installing the library in my main project (also built with Vue 3 & Webpack 5), I'm importing only a single component (button) into it. However, after the build finished (CSS build) I see other components's CSS are included in the build as well. I should mention The JS tree shaking do working.

I want to reduce my bundle size to include only the CSS of the imported components.

An example for button component in my build file:

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);