第一种
使用深度作用选择器,可以通过vue-loader提供的新写法 vue-loader 写法如下(先安装,在使用):
<style scoped
>
.a >>> .b { /* ... */ }
</style>
某些预处理器(如less)可能无法>>>正确解析。在这些情况下,您可以使用/deep/组合器 - 它是别名,>>>并且完全相同。
<style scoped lang="less">
.form {
background-color: #fff;
/deep/ .list{
font-size: 18px;
}
}
</style>
sass注意要用 /deep/ ,而无法使用 >>> 这个符号。
通过 v-html 创建的 DOM 内容不受作用域内的样式影响,但是你仍然可以通过深度作用选择器来为他们设置样式 。
第二种
<style scoped> with <style>
也许你遇到过这种情况,需要修改某一个ui框架的默认样式,但是在scoped的style块中修改不成功。不得不将style块的scoped属性拿掉,或者将这个要改变的样式放进全局样式里再在main.js中导入,或者直接将样式定义在App.vue里面。这些都是可行的,但是要注意命名空间要是正确的,不然是找不到样式的。
这里提供另一种方法。其实在vue的SFC中,是允许多个style块的。你可以像下面这样使用:
<style scoped lang="scss">
.order-detail {
// put your local style here
}
</style>
<style>
.mint-button{
// put your global style here if you want to change the lib's style
}
</style>
参考文章:https://blog.csdn.net/qq_42221334/article/details/88533329