sass 中使用/deep/报错(已解决)
vue3中使用element plus,想要覆盖组件的样式,想到了/deep/样式穿透,样式一直不生效,代码如下:<style scoped lang="sass">.main_wrapperpadding: 0 53pxposition: relativetop: -20px>>> .el-tabs__itemheight: 30pxline-height: 30p
·
vue3中使用element plus,想要覆盖组件的样式,想到了/deep/样式穿透,样式一直不生效,代码如下:
<style scoped lang="sass">
.main_wrapper
padding: 0 53px
position: relative
top: -20px
>>> .el-tabs__item
height: 30px
line-height: 30px
color: #fff!important
</style>
上边的写法不会报错,但是也不会生效。改用下面的方式:
<style scoped lang="sass">
.main_wrapper
padding: 0 53px
position: relative
top: -20px
/deep/ .el-tabs__item
height: 30px
line-height: 30px
color: #fff!important
</style>
好码,这样就报错了,如下:
SassError: expected selector
看来sass不支持这个选择器。
解决方法:
尝试用 ::v-deep 替换 /deep/ ,成功解决了问题。
<style scoped lang="sass">
.main_wrapper
padding: 0 53px
position: relative
top: -20px
::v-deep .el-tabs__item
height: 30px
line-height: 30px
color: #fff!important
</style>
但是后续发现,控制台给出了这样的提示:
::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selecto
意思上边的语法已经废弃了,需要把::v-deep后边的选择器放在一个括号了:
<style scoped lang="sass">
.main_wrapper
padding: 0 53px
position: relative
top: -20px
::v-deep(.el-tabs__item)
height: 30px
line-height: 30px
color: #fff!important
</style>
到此,警告已经消失不见了。
更多推荐
所有评论(0)