bounty明天到期。此问题的答案有资格获得+50声望奖励。Franco Aguilera正在寻找一个答案从一个有信誉的来源。

我正在做一个项目（vite，vue 3，ts和bootstrap），我不能让“@extend”通过postCSS工作。
这是我创建的一个示例项目，作为我想做的事情的一个例子：Github repo
如果您查看文件src/components/HelloWorld.vue，您将看到有一个带有两个引导类（“btn”和“btn-success”）的按钮。
我想做的是通过postCSS实现@extend功能来实现这样的功能

<template>
  <div class="text-center">
    <button type="button" class="my-btn">Success</button>
  </div>
</template>

<style scoped>
  .my-btn {
    @extend btn btn-success;
  }

</style>

但是我不能让它工作，我是postCSS的新手，我不太明白我缺少什么配置来实现我想要的东西。
我已经试过这些插件了
https://www.npmjs.com/package/postcss-nesting
https://www.npmjs.com/package/postcss-nested
https://www.npmjs.com/package/postcss-apply
但似乎没有一个能成功
有什么想法吗
编辑：我使用了@extend prop，因为我认为应该是关键字，但也许是类似@apply的东西，真的不确定。

编辑2：我能够使用postcss-extend-rule使其工作，但只有当扩展类在相同的vue文件风格范围内时。我认为这里的问题是让postCSS能够找到bootstrap全局类。

示例：

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

.my-btn { 
  @extend .my-class; 
}

/*this will not work*/
.my-btn { 
  @extend .btn; 
}