css - angular2の個々のコンポーネントでグローバルSASS mixin関数にアクセスするには?

Question

グローバル SCSS ファイルに共通の SCSS mixin 関数があります。しかし、angular2 コンポーネント内の mixin 関数にアクセスできませんでした。

私は、次の mixin 関数を持つグローバルな style.scss を持っています

@mixin respond-to($breakpoint) {
  @if $breakpoint == "small" {
    @media (max-width: 767px) {
      @content;
    }
  }
  @else if $breakpoint == "medium" {
    @media (min-width: 992px) {
      @content;
    }
  }
  @else if $breakpoint == "large" {
    @media (min-width: 1200px) {
      @content;
    }
  }
}

私は component.scss のようなこの mixin 関数にアクセスしようとしています

.procard{
width:50%;
 @include respond-to(small){ 
  .pro-card{
    width: 100%;
    .pro-box{
      max-width: 320px;
      margin:0 auto;
     }
   }
 } 
}

これを実行するとエラーが表示されます