Scope Bootstrap Css во Vue
Я пытаюсь использовать Bootstrap в компоненте Vue и хочу, чтобы весь CSS был ограничен. Я пробовал что-то вроде этого:
<style scoped>
@import "~bootstrap/dist/css/bootstrap.css";
@import "~bootstrap-vue/dist/bootstrap-vue.css";
</style>
Но не похоже, что css ограничен. Есть ли способ сделать это?
Ответы 3
<style scoped src = "~bootstrap/dist/css/bootstrap.css"></style>
<style scoped src = "~bootstrap-vue/dist/bootstrap-vue.css"></style>
Обновлять: взлом с использованием SCSS
Причина, по которой первое решение не работает:
With scoped, the parent component's styles will not leak into child components.
If you want a selector in scoped styles to be "deep", i.e. affecting child components, you can use the >>> combinator
from the Vue doc for scoped CSS
Упомянутое вами модальное окно, по-видимому, не контролируется компонентом, в который вы импортировали бутстрап. Возможно, это дочерний компонент. Возможно, вы используете jquery-версию модального окна Bootstrap. В любом случае атрибуты данных не будут добавлены в модальное окно.
Чтобы решить эту проблему, вам понадобится Deep Selector. (подробнее об этом можно прочитать в https://vue-loader.vuejs.org/en/features/scoped-css.html)
Вот как я бы импортировал весь CSS Bootstrap с помощью SCSS. (Я думаю, что это невозможно сделать, используя только чистый CSS.)
<template>
<div class = "main-wrapper">
/* ... */
</div>
</template>
<style scoped lang = "scss">
.main-wrapper /deep/ {
@import "~bootstrap/dist/css/bootstrap.min";
}
</style>
Some pre-processors, such as Sass, may not be able to parse >>> properly. In those cases you can use the /deep/ combinator instead - it's an alias for >>> and works exactly the same.
Сгенерированный CSS будет похож на
.main-wrapper[data-v-656039f0] .modal {
/* some css... */
}
.. что вы хотите.
НО, я должен сказать, что импорт всего Bootstrap CSS - действительно плохая практика. Попробуйте импортировать из bootstrap-sass только то, что вы собираетесь использовать.
Это решение взломано. Но это единственный известный мне способ, который может сработать для вашего варианта использования.
Следует добавить дополнительную информацию и объяснение этой проблемы.
пытаюсь обновить. дай мне еще несколько минут @Eka
@import не может быть ограничен, он всегда применяется глобально
@ ctf0 это не импорт css. Это импорт scss
да, я понимаю, поэтому мы не использовали url() для импорта, однако при компиляции vue преобразует его как обычный импорт css, и вы получите стиль с @import в заголовке ur
@ ctf0 очевидно, если он преобразован в импорт css, что-то не так с тем, как вы его используете в scss.
Разве @import "~bootstrap/dist/css/bootstrap.min"; не будет импортировать файл css?
@ ctf0 да, но он будет импортировать его способом SCSS. Вы не должны видеть @import ... в сгенерированном CSS. (Не уверен, правильно ли я понял вашу проблему)
Работает отлично. Единственная небольшая проблема была с Модальный компонент, который (логически) должен иметь атрибут static для рендеринга внутри его родительского компонента.
ВАЖНОЕ примечание re. выше ... Если вы, как и я, попытаетесь @импортировать файл .css, это не сработает (будет применяться глобально). Переименуйте ваш файл .css в .scss, тогда он будет работать ?
@LMK не нужно переименовывать расширение, просто импортируйте его БЕЗ расширения, как в ответе. @import "~bootstrap/dist/css/bootstrap.min";
Я хотел использовать vuetify в своем приложении только на странице, и это привело к сбою моего css, тогда я использую
<style scoped src = "vuetify/dist/vuetify.min.css"></style>
и теперь все работает отлично.
<template>
<div> ....... </div>
</template>
<style scoped src = "vuetify/dist/vuetify.min.css"></style>
<script> ...... </script>
Я знаю, что это старый вопрос, но это решение работает для меня
<style lang = "scss" scoped>
::v-deep {
@import 'bootstrap/scss/bootstrap.scss';
}
</style>
Я использовал вышеупомянутое, и bootstrap css просочился глобально, то есть без области действия.
Он выполняет свою работу, но это не нормально в случае Bootstrap - динамически генерируемые элементы, похоже, не имеют атрибутов. Я пробовал это на простом модальном, и, похоже, это не сработало.