Как изолировать компонент от внешних стилей (css-framework'а)?

Question

[ReaverJS]

К примеру у меня такая структура компонентов:

<App>
    <Layout>
        <Component1>
        <Component2>

Также подключен Materialize

<!-- Внутри компонента App -->
<style>
@import 'materialize-css/dist/css/materialize.min.css';
</style>

Как мне сделать, чтобы стили materialize не работали внутри моих компонентов Component1 и Component2?

Что пытался:
1) Подключать материалайз через сурс:

<style scoped src="materialize-css/dist/css/materialize.min.css"></style>

Тогда материалайз работает только для этого компонента - все ок (внутри перед каждым стилем ставится родительский селектор data-v-xxx). Но проблема в том, что надо импортировать его в каждом компоненте, соответственно стили дублируются для каждого компонента.
2) На SO нашел такое решение:

<!-- Внутри компонента App -->
<style>
#app, #layout { /* или с псевдо-селектором /deep/ */
    @import 'materialize-css/dist/css/materialize.min.css';
}
</style>

Но scss не хочет компилиться. Линт никакой ошибки не выдает, просто materialize не подключается.

Только осваиваю node, vue, так что не ругайтесь пожалуйста.

Comments

[Andrey Suha]

А зачем это делать? Может просто не использовать классы из materialize в этих компонентах?

[ReaverJS]

Andrey Suha, очень тяжело будет.
Много классов, которые используются по наитию - container, -wrapper, card, row...
Еще боюсь что напишу класс, а окажется что такой есть в материалайзе. Всё таки все их я не знаю, я больше по бутстрапу.

[Andrey Suha]

ReaverJS, попробуйте использовать это для компонентов в которых не хотите использовать materialize. Но думаю что все же более правильный путь не использовать классы материалайза в таких компонентах