bootstrap vue 下拉创建一个没有 data-v-XXX 的按钮

Question

我正在使用 bootstrap vue 创建一个下拉菜单，但我无法在其上应用范围样式，因为创建的主按钮没有 "data-v-XXX" 属性。

有什么解决办法吗？

<b-dropdown id="ddown2" variant="link" toggle-class="btn-clean">
  <b-dropdown-item-button>test 1
  </b-dropdown-item-button>
  <b-dropdown-item-button>test 2
  </b-dropdown-item-button>
</b-dropdown>

<style scoped>
  .btn-clean {
      color: #337ab7;
  }
</style>

生成的代码：

<div id="ddown2" class="btn-group b-dropdown dropdown" data-v-25a41064=""> 
   <button id="ddown2__BV_toggle_" aria-haspopup="true" aria-expanded="false" type="button" class="btn btn-link dropdown-toggle btn-clean">test1</button>
   <div role="menu" aria-labelledby="ddown2__BV_toggle_" class="dropdown-menu">
       <button role="menuitem" type="button" class="dropdown-item" data-v-25a41064="">test1
      </button><button role="menuitem" type="button" class="dropdown-item" data-v-25a41064="">test2
      </button>
   </div>
</div>

没有 "data-v-25a41064" 按钮 id="ddown2__BV_toggle_"

Answer 1

我今天遇到了同样的问题。如果我将样式组件放得更高，这对我有帮助。

Answer 2

Vue-loader 仅将作用域样式应用于子组件的根元素。

您需要使用 /deep/ CSS 选择器来定位子组件内部。

请参阅 https://vue-loader.vuejs.org/guide/scoped-css.html#child-component-root-elements

上的文档

bootstrap vue 下拉创建一个没有 data-v-XXX 的按钮

bootstrap vue dropdown creates a button without data-v-XXX

bootstrap-vue