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>

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

Answer 1

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

Answer 2

Vue加载器仅将作用域样式应用于子组件的根元素。

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

请参阅上的文档https://vue-loader.vuejs.org/guide/scoped-css.html#child-组件根元素