如何在Tailwind的@layer中使用SASS局部文件？

我想把Tailwind组件类拆分到多个下划线命名的Sass局部文件中，再导入到@layer components{}里，于是创建了如下文件结构：

styles/
├─ components/
│  ├─ _my-button.scss
│  ├─ _my-spinner.scss
├─ index.scss

局部文件里的自定义组件类示例如下：

/* _my-button.scss */

.my-button {
  @apply ....
}

我尝试用@use（也试过已废弃的@import）进行导入，代码如下：

/* index.scss */

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer component {
  @use "./components/my-button";
}

但因为Sass的at-rules限制无法实现，报错信息：

❌ [ERROR] This at-rule is not allowed here.
   ╷
08 │   @use "./components/my-button";

更新：我现在用@include配合将单个组件类文件包裹在@mixin中的方式实现了功能，但不确定这是不是正确的做法。

内容的提问来源于stack exchange，提问作者Alex Pappas