Здравствуйте.
Подскажите, пожалуйста, решение проблемы.
Ситуация:
Разрабатываю компонент при помощи vue + vuetify, который должен быть включен в legacy html страницу. Возникла сложность с подключением css самого vuetify в этот компонент.
Что я попробовал сделать:
Вариант 1.
css добавляется в плагине при помощи строчки:
import 'vuetify/src/stylus/app.styl'
В корневом шаблоне используется элемент , вот так:
<template>
<v-app>
<h2>Test</h2>
<v-layout row>
<v-btn color="red">TestButton</v-btn>
<v-btn color="primary">TestButton2</v-btn>
</v-layout>
</v-app>
</template>
Проблема с этим вариантом: css влияет на всю html страницу, в которую включен компонент, элемент v-app превращается в блок высотой во всю страницу, а нужно, чтобы он занимал высоту внутренних элементов.
Вариант 2: теоретически, если к компоненту применить
<style scoped></style>,
то стиль применится только к компоненту, но на самом деле эффект такой же как и в первом варианте:
что в этом варианте было сделано:
комментируем строку подключения стилей в плагине:
//import 'vuetify/src/stylus/app.styl'
в комоненте добавляем тег
style scoped, чтобы получилось вот так:
<style scoped>
@import url('../node_modules/vuetify/dist/vuetify.min.css');
</style>
<template>
<v-app>
<h2>Test</h2>
<v-layout row>
<v-btn color="red">TestButton</v-btn>
<v-btn color="primary">TestButton2</v-btn>
</v-layout>
</v-app>
</template>
Соответственно, вопрос, как все же нужно сделать так, чтобы достичь желаемого результата:
vuetify компонент встраивается в существующую html страницу, в которой много другого html кода и который должен по высоте занимать ровно столько, сколько он сам занимает (или как-то ограничить по высоте v-app).
Спасибо за внимание.
Простой
