How to use sass extend in vue 3?

[axelthat]

So I imported bootstrap like so in app.scss for example,

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/bootstrap.scss";

Now inside a component if I do,

<style scoped lang="scss">
.text {
  @extend .text-white;
}
</style>

I get the following error,

[plugin:vite:css] The target selector was not found.
Use "@extend .text-white !optional" to avoid this error.
  ╷
8 │   @extend .text-white;
  │   ^^^^^^^^^^^^^^^^^^^
  ╵
  src/components/Navbar.vue 8:3  root stylesheet

[akarelas]

It says here: https://stackoverflow.com/questions/55184007/how-do-i-extend-external-css-classes-in-a-vue-component