PostCSS can't find global CSS bootstrap classes when using @extend from postcss-extend-rule in vite

I'm working on a project with (vite, vue 3, ts, and bootstrap) and I can't get "@extend" to work through postCSS.

This is a sample project i created to show as an example of what i want to do: Github repo

if you look at the file src/components/HelloWorld.vue You will see that there is a button with two bootstrap classes ("btn" and "btn-success).

What I want to do is through postCSS implement the @extend functionality to achieve something like this

<template>
  <div class="text-center">
    <button type="button" class="my-btn">Success</button>
  </div>
</template>
<style scoped>
  .my-btn {
    @extend btn btn-success;
  }
</style>

But I can't get this to work, I'm new into postCSS and I don't quite understand what configuration I'm missing to achieve what I want to do.

I have already tried these plugins

https://www.npmjs.com/package/postcss-nesting

https://www.npmjs.com/package/postcss-nested

https://www.npmjs.com/package/postcss-apply

but it seems none of them makes the trick.

Any ideas ?

EDIT: I used @extend prop since is the one I think should be the keyword, but maybe is something like @apply, not sure really.

EDIT 2: I was able to make it work using postcss-extend-rule but only if the extended class was on the same vue file style scope. I think the problem here is to make postCSS able to find bootstrap global classes.

example:

/*this will work*/
.my-class { 
  color: red; 
  background: pink; 
} 
.my-btn { 
  @extend .my-class; 
}
/*this will not work*/
.my-btn { 
  @extend .btn; 
}

You need to import bootstrap.css in the file where you @extend its selectors. Otherwise, PostCSS will not be able to process them.

In HelloWorld.vue:

<style>
/* no "node_modules" needed */
@import 'bootstrap/dist/css/bootstrap.css';
.my-class {
  color: red;
  background: pink;
}
.my-btn {
  @extend .btn, .btn-success;
}
</style>