使用混入和未定义媒体混入的scss

Question

我是第一次使用mixins和媒体，而我的CSS技能也不是那么好。它在React应用程序中使用。我收到SassError：未定义的混合。这段代码出错，不确定我在这里缺少什么。我需要带图书馆吗？

在我的map.tsx文件中，我正在导入scss文件并使用div标签

import styles from "./map.module.scss";
<div className={styles.helpbutton}>
    <AboutPopup />
  </div>

在我的map.module.scss中，我有这个CSS

.helpbutton {
  position: absolute;
  bottom: 2em;
  right: 2em;
  @include for-phone-only {
    position: absolute;
    top: 2em;
    right: 2em;
  }
}


@mixin for-phone-only {  // Seems like error is coming here
  @media (max-width: 599px) {
    @content;
  }
}

但是我收到此错误SassError：未定义的混合。

不知道为什么当它在同一文件中时会说未定义。