Сфера Bootstrap Css в Vue

Я пытаюсь использовать Bootstrap в компоненте Vue, и я хочу, чтобы весь CSS был ограничен. Я попробовал что-то вроде этого:

<style scoped>
@import "~bootstrap/dist/css/bootstrap.css";
@import "~bootstrap-vue/dist/bootstrap-vue.css";
</style>

Но не похоже, что CSS ограничен. Есть ли способ сделать это?

Источник

6 ответов 

<style scoped src="~bootstrap/dist/css/bootstrap.css"></style>

<style scoped src="~bootstrap-vue/dist/bootstrap-vue.css"></style>

Обновление: взлом с использованием SCSS

Причина, по которой первое решение не будет работать:

В области видимости стили родительского компонента не проникают в дочерние компоненты.

Если вы хотите, чтобы селектор в стилях областей был "глубоким", то есть влиял на дочерние компоненты, вы можете использовать комбинатор >>>

из документа Vue для CSS

Упомянутый вами модал явно не контролируется компонентом, в который вы импортировали начальную загрузку. Возможно, это дочерний компонент. Возможно, вы используете jquery-версию Bootstrap. В любом случае, атрибуты данных не будут добавлены к модальному.

Чтобы решить эту проблему, вам нужен Deep Selector. (вы можете прочитать об этом более подробно в https://vue-loader.vuejs.org/en/features/scoped-css.html)

Вот как я могу импортировать весь Bootstrap CSS, используя SCSS. (Я думаю, что это невозможно сделать, используя только чистый CSS.)

<template>
  <div class="main-wrapper">
    /* ... */
  </div>
</template>

<style scoped lang="scss">
.main-wrapper /deep/ {
  @import "~bootstrap/dist/css/bootstrap.min";
}
</style>

Некоторые препроцессоры, такие как Sass, могут не иметь возможности правильно проанализировать >>>. В этих случаях вы можете использовать /deep/ combinator - это псевдоним для >>> и работает точно так же.

Сгенерированный CSS будет похож на

.main-wrapper[data-v-656039f0] .modal {
    /* some css... */
}

.. чего ты хочешь

НО, я должен сказать, что импортирование всего Bootstrap CSS - очень плохая практика. Попробуйте импортировать только то, что вы собираетесь использовать из bootstrap-sass.

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

Источник

Я знаю, что это старый вопрос, но это решение работает для меня

<style lang="scss" scoped>
 ::v-deep {
   @import 'bootstrap/scss/bootstrap.scss';
 }
</style>
Источник

Я хотел использовать 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>
Источник

Они изменили ::v-deep селектор в Vue 3, старый метод все еще работает, но устарел (что может привести к множеству сообщений об устаревании в вашей сборке, если вы импортируете css / scss таким образом).

Итак, для записи, вот как вы поступили бы в Vue 3:

      <template>
    <div class="main-wrapper">
        <div class="bootstrap-scope">
            /* All children that need Bootstrap including slotted content etc */
        </div>
    </div>
    
</template>

<style scoped lang="scss">
    .main-wrapper::v-deep(.bootstrap-scope) {
        @import "~bootstrap";
    }
</style>

Вы также можете опустить div.main-wrapperи выберите корневой компонент SFC div. Допустим, имя вашего компонента my-awesome-component селектор будет:

      <style scoped lang="scss">
    .my-awesome-component::v-deep(.bootstrap-scope) {
        @import "~bootstrap";
    }
</style>

Или, если вы предпочитаете не использовать сгенерированное имя класса, вы также можете выбрать:

      <style scoped lang="scss">
    div:first-child::v-deep(.bootstrap-scope) {
        @import "~bootstrap";
    }
</style>

В реальном shadowDom вы должны использовать :hostселектор, чтобы выбрать корень вашего компонента, что сделает его более кратким, но, насколько я понимаю (https://github.com/vuejs/vue-loader/issues/1601), команда vue-loader еще не решила что с этим делать.

В :deep()selector имеет небольшой раздел, посвященный ему в официальных документах Vue 3: https://v3.vuejs.org/api/sfc-style.html#deep-selectors

Также есть VueJS RFCS на глубоком селекторе, который более подробно описывает, почему он продолжает меняться: https://github.com/vuejs/rfcs/blob/master/active-rfcs/0023-scoped-styles-changes.md

Источник

Для меня это было решением, чтобы заставить его работать и предотвратить утечку:

      <style lang="less" scoped>
    ::v-deep {
        @import (less) "../node_modules/vuetify/dist/vuetify.min.css";
    }
</style>

Приведение к меньшему, очевидно, также может быть изменено на scss.

Источник

Обратите внимание, читая решение сегодня:

Атрибут scoped устарел и будет удален. Не используйте это.

- https://www.w3schools.com/tags/att_scoped.asp

Источник
Другие вопросы по тегам