Как использовать mixin sass в react

Создаю миксины в отдельном файле, импортирую в корневой компонент. Пытаюсь использовать но при обращении в scss файле к миксину выходит ошибка

@mixin respond-to($media) {
  @if $media == mobile {
    @media (max-width: $mobile - 1) {
      @content;
    }
  } @else if $media == tablet {
    @media (min-width: $tablet) {
      @content;
    }
  } @else if $media == tabletLarge {
    @media (min-width: $tabletLarge) {
      @content;
    }
  } @else if $media == desktop {
    @media (min-width: $desktop) {
      @content;
    }
  } @else if $media == desktopLarge {
    @media (min-width: $desktopLarge) {
      @content;
    }
  } @else if $media == desktopHuge {
    @media (min-width: $desktopHuge) {
      @content;
    }
  }
}

вызываю миксин в scss файле

@include respond-to($mobile){
    background-color: #000;
}

ошибка
./src/components/day/day.scss (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--6-oneOf-5-3!./node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-5-4!./src/components/day/day.scss)