CSS неправильно скомпилирован при использовании миксина SASS

Question

Когда я включаю mixin для html-элемента, html-элемент оказывается вложенным в стиль mixin в скомпилированном CSS.

Скомпилированный CSS ниже выдает ошибку, потому что первое свойство @ font-facea ' .myDiv '.
(не уверен, как он был вставлен внутрь во время компиляции).

// INPUT SASS //

@mixin font-face($font-name, $font-path) {
  @font-face {
    font-family: $font-name;
    src: url('#{$font-path}');
  }
}

.myDiv {
  @include font-face('custom', 'assests/fonts/custom.woff');
  width: 100px;
}

// OUTPUT CSS //

   .myDiv {
      width: 100px;
    }

    @font-face {
      .myDiv {
        font-family: "custom";
        src: url("assests/fonts/custom.woff");
      }
    }

Спасибо !!

Answer 1

font-face не является свойством, которое вы устанавливаете для элемента.Вам необходимо импортировать его в свой CSS-файл и использовать свойство font-family для элемента.

см. Код ниже

@mixin font-face($font-name, $font-path) {
  @font-face {
    font-family: $font-name;
    src: url('#{$font-path}');
  }
}
@include font-face('custom', 'assests/fonts/custom.woff');
 
.myDiv {
  font-family: custom;
  width: 100px;
}

<div class="myDiv">
  assss
</div>