使用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”类被添加到带有nav-item classname的li父div,但css没有显示。
它在这里工作:https://jsfiddle.net/3xwmm1qt/43/但我很确定这是因为在页面渲染后加载了css。我不是百分之百。
已更新我还尝试从样式标记中删除'scoped'属性,css仍然有用。当我检查div时,它仍然没有显示出来。我仍然可以看到类名,但是在“规则”选项卡中(使用FF),我的自定义类名没有样式。
答案 0 :(得分:0)
是的,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>
Scoped意味着css代码只能在这个元素中起作用,而vue只会尝试对附加到你试图覆盖的类的元素的类进行操作,而不是作用域意味着它会做它对整个文档来说都会覆盖bootstrap的css。