как можно исправить эту проблему??
Ровно так, как написано в тексте ошибки: Не использовать "&" на верхнем уровне.
UPD
main.scss
@mixin example() {
&::hover { color: red; } // Так можно
// но миксин можно использовать только внутри родительского селектора
}
&::hover { color: red; } // Так нельзя, нет родителя
.block {
&::hover { color: red; } // Так можно, есть родительский селектор (.block)
}
@include example(); // Так нельзя, внутри обращение к родителю, а его нет
.block {
@include example(); // Так можно
}