How to solve the issue with CSS framework for web components?

Question

css

For example, there are 2 projects. I wrote a VUE component and used Bootstrap 3 as styles for the buttons - In general, Bootstrap is used in the first project, but not often, but there is.
Next, I am writing a second project and I want to use this written component in it. But I want to use BULMA - I already use it more often for the project and the bootstrap buttons are not needed there at all, this framework has its own.

It turns out that I cannot write a universal component for both projects. There, either the style of the buttons will be your own, or you need to clone the component and replace only the style attributes of a particular framework there. This results in code duplication. Moreover, a tiny part of the style attributes changes. The rest is identical.

Yes, even if you switch to a new version of the same bootstrap in the project, the component will not be so easy to translate. It can also be used in other projects with an older version of bootstrap.

There are also CSS frameworks. And for each, if necessary, you need to provide the ability to "save" styles. Roughly speaking, the buttons in the component and the buttons in the entire project should be the same.

How to solve this problem?

Answer 1

It turns out that I cannot write a universal component for both projects.

You can. There is no need to drag the bootstrap or bulma library if you are sawing one-two-five components. Write styles for the button - 30 seconds. For such things, a framework is not needed.

Answer 2

Use mixins or inheritance .
You just create a basic component without layout (or with a basic one), but with the necessary functionality, and layout the heirs for each design separately.