ReaverJS
@ReaverJS

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

К примеру у меня такая структура компонентов:
<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, так что не ругайтесь пожалуйста.
  • Вопрос задан
  • 458 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы