Стиль вкладки Bootstrap-vue

У меня проблемы с переопределением стилей начальной загрузки в моем однофайловом компоненте при использовании bootstrap-vue

Мой файл выглядит так:

<template>
  <b-tabs pills vertical>
    <b-tab title="This title" title-item-class="mytab" acitve>
      Some tab
    </b-tab>
    <b-tab title="This title 2" title-item-class="mytab">
      Some other tab
    </b-tab>
 </b-tabs>
</template>
<script>
export default {}
</script>
<style lang="less" scoped>
  
  .nav-pills .mytab .nav-link:not(.active) {
    background-color: red !important;
  }
  
  .nav-pills .mytab .nav-link {
    background-color: blue !important;
  }
  
  .tab-content > .tab-pane {
    border: 1px solid;
    border-left: 0px none;
  }
</style>

Я могу проверить свой компонент и увидеть, что класс «mytab» добавляется к родительским div li с именем класса nav-item, но CSS не отображается.

Это работает здесь: https://jsfiddle.net/3xwmm1qt/43/, но я симпатичный конечно, потому что CSS загружается после рендеринга страницы. Я не на все 100% об этом.

Обновлено. Я также попытался удалить атрибут scoped из тега стиля, и CSS все равно будет работать. Он все еще даже не отображается, когда я проверяю div. Я все еще вижу имя класса, но на вкладке «Правила» (с помощью FF) нет стиля для моего пользовательского имени класса.


vuejs2 bootstrap-vue
person lmcadory    schedule 27.03.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Да, разница между jsfiddle и вашим кодом в том, что вы написали CSS с ограниченной областью видимости (меньше):

Вот как это исправить: удалить область видимости из стиля:

<style lang="less">

  .nav-pills .mytab .nav-link:not(.active) {
    background-color: red !important;
  }

  .nav-pills .mytab .nav-link {
    background-color: blue !important;
  }

  .tab-content > .tab-pane {
    border: 1px solid;
    border-left: 0px none;
  }
</style>

Область видимости означает, что код css будет работать только в этом элементе, а vue попытается сделать это только для классов, прикрепленных к элементам, у которых есть класс, который вы пытались переопределить, но не в области видимости означает, что он будет делать это для всего документа. следовательно, переопределит загрузочный css.

person Daksh Miglani    schedule 27.03.2018
comment
Это было первое, что я попробовал, но все равно не сработало. :( - person lmcadory; 27.03.2018
comment
Я думал, что это ошибка в bootstrap-vue, но они просто импортируют bootstrap4 css - person lmcadory; 27.03.2018
comment
я полагаю, в предоставленном вами фрагменте кода не было последней угловой скобки ‹/style› - person Daksh Miglani; 27.03.2018
comment
да, это была опечатка при создании вопроса - person lmcadory; 27.03.2018
comment
что вы используете для связывания? - person Daksh Miglani; 27.03.2018
comment
webpack. Я использовал стандартный шаблон веб-пакета с vue-cli. Я не менял настройки по умолчанию - person lmcadory; 27.03.2018
comment
попробовать использовать css напрямую вместо less? - person Daksh Miglani; 27.03.2018
comment
Давайте продолжим это обсуждение в чате. - person lmcadory; 27.03.2018