scss解析/deep/以及>>>深度选择器报错
若存在::v-deep未生效的情况,确认使用的文件是否为组件级,若为组件级,改为在调用该组件的页面设置::v-deep即可。但是有些开发者反应,在vue-cli3编译时,deep的方式会报错或者警告。但是像scss等预处理器却无法解析>>>,所以我们使用下面的方式.如果vue的style使用的是css,那么则。此时我们可以使用第三种方式。
·
1、>>>
如果vue的style使用的是css,那么则
<style lang="css" scoped>
.a >>> .b {
/* ... */
}
</style>
但是像scss等预处理器却无法解析>>>,所以我们使用下面的方式.
2、/deep/
<style lang="scss" scoped>
.a{
/deep/ .b {
/* ... */
}
}
</style>
但是有些开发者反应,在vue-cli3编译时,deep的方式会报错或者警告。
此时我们可以使用第三种方式
3、::v-deep
切记必须是双冒号
<style lang="scss" scoped>
.a{
::v-deep .b {
/* ... */
}
}
</style>
注:
若存在::v-deep未生效的情况,确认使用的文件是否为组件级,若为组件级,改为在调用该组件的页面设置::v-deep即可。
4、:deep()
在vue3中项目中使用deep:
<style lang="scss">
.a{
:deep(.b){
/* ... */
}
}
</style>
更多推荐
已为社区贡献3条内容
所有评论(0)