extending from bootstrap-vue scss

Question

I'm trying to create a class that extends a bootstrap scss class:

@import '../../../node_modules/bootstrap/scss/bootstrap';
.settings-card {
  @extend .my-3;
  max-width: 30rem;
}

The extend is not complaining about not finding .my-3 (so I presume it is there, without the import it will complain).

This results in a class with only max-width being set.

The real setup is a little more complicated, since I'm using vue and bootstrap vue. This is exactly how it looks like, within a vue single component:

<style lang="scss" scoped>
@import '../../../node_modules/bootstrap/scss/bootstrap';

.settings-card {
  @extend .my-3;
  max-width: 30rem;
}
</style>

Answer 1

Please check

@use '../../../node_modules/bootstrap/scss/bootstrap';