Ограничьте сферу сторонних CSS с помощью sass

Question

Мне нужно отобразить SPA в устаревшем приложении (фреймы не разрешены). Приложение SPA использует стороннюю CSS. К сожалению, сторонний css вмешивается в стили унаследованного приложения, и мне нужно как-то ограничить его область действия. Я хотел бы сделать что-то подобное в SPA:

<div class="use-third-party-css">
    <!-- SPA -->
</div>

Чтобы сделать это, я создал файл scss:

.use-third-party-css { 
     @import "../node_modules/third-party/dist/default";
}

В настоящее время работает нормально, но предупреждает, что функция импорта CSS устарела и скоро будет удалена. Есть ли способ сделать это "обзор" проще и / или без предупреждения? EDIT: Есть также версия scss, я мог бы сделать что-то вроде этого:

.use-third-party-css { 
     @import "../node_modules/third-party/src/default.scss";
}

Но это не работает для меня из-за следующего "неожиданного" поведения. Следующий файл:

@mixin testMixin() {
    &-a > &-b {
       color: black;
   }
}

.c {
   @include testMixin();
}

Будет изменен на

.use-third-party-css .c-a > .use-third-party-css .c-b {
    color: black; 
}