站长资源
中国站长网站

基于vue-loader修改组件样式之/deep/与>>>的区别

我们在vue页面组件中写样式一般会加上scoped来防止全局污染

<style scoped>
.red{color:red}
</style>

但是对于组件内部的子组件中的样式我们在当前页面是看不到的,所以加上去也没有效果。当然你要是确定全局都需要修改,那直接把scoped去除即可,显然这种需求有,但不至于写篇文章记录。

那么我们要在当前页面修改子组件的样式就可以使用vue-loader穿透符号>>>

<style scoped>
>>>.el-dialog__header{text-align: center;}
</style>

注意很多时候我们不单用了scoped还使用了scss等预处理工具,即

<style scoped lang="scss">
>>>.el-dialog__header{text-align: center;}
</style>

这时候发现样式又不起作用了,这是因为sass预处理器不认识这么个玩意,那么怎么解决呢

<style lang="scss" scoped>
/deep/ .el-dialog__header{text-align: center;}
</style>

当然这种方式有可能还是会报错,那么就把/deep/更换成::v-deep

<style scoped lang="scss">
::v-deep .el-dialog__header{text-align: center;}
</style>

本文出处:来自互联网信息共享,请勿相信收费信息站长资源 » 基于vue-loader修改组件样式之/deep/与>>>的区别

评论 抢沙发

评论前必须登录!