How to override Bootstrap 5 styles in Vue 3?

Question

Bootstrap

If you apply this code

<style lang="scss">
  .custom-btn {
    background: red;
  }
</style>

,
then the styles are not applied if I write this class in the button in template. Only works with !important, but that's not an option. Is there a way to override this?

Answer 1

Well, you can disable !important inside bootstrap. See $enable-important-utilities .
If you need an example: here is how to connect and override parameters in one of my projects