[@vue/compiler-sfc] the >>> and /deep/ combinators have been deprecated. Use :deep() instead.
编译运行出现"[@vue/compiler-sfc] the >>> and /deep/ combinators have been deprecated. Use :deep() instead."黄色警告提示,不影响项目的运行,但是看着很难看,就想着把它解决调。出现这个提示是因为 >>> 和 /deep/ 组合器已被弃用,需要使用 :deep()或者 ::v-deep() 代替。
出现原因
编译运行出现"[@vue/compiler-sfc] the >>> and /deep/ combinators have been deprecated. Use :deep() instead."黄色警告提示,不影响项目的运行,但是看着很难看,就想着把它解决调。
出现这个提示是因为 >>> 和 /deep/ 组合器已被弃用,需要使用 :deep() 或者 ::v-deep() 代替。
解决方案
第一种 使用 :deep() 代替
// 原样式
/deep/ .hiprint-printElement-type>li>ul>li>a {
padding: 4px 4px;
color: #1296db;
line-height: 1;
height: auto;
text-overflow: ellipsis;
}
// 修改后
:deep(.hiprint-printElement-type>li>ul>li>a) {
padding: 4px 4px;
color: #1296db;
line-height: 1;
height: auto;
text-overflow: ellipsis;
}
第二种 使用 ::v-deep() 代替
// 原样式
/deep/ .hiprint-printElement-type>li>ul>li>a {
padding: 4px 4px;
color: #1296db;
line-height: 1;
height: auto;
text-overflow: ellipsis;
}
// 修改后
::v-deep(.hiprint-printElement-type>li>ul>li>a) {
padding: 4px 4px;
color: #1296db;
line-height: 1;
height: auto;
text-overflow: ellipsis;
}
补充(深度选择器总结记录)
在 vue 项目的开发过程,使用了 ElementUI 组件且样式 style 使用了 scoped 属性,当想要修改组件样式,发现直接修改不了,需去掉 scoped 属性或者使用深度选择器才能修改成功。去掉scoped的话又会影响全局样式,针对这种情况,可以使用深度作用选择器(即样式穿透)。
1、当项目中使用的 css 原生样式 ,需要使用 >>> 深度选择器来修改 外用第三方组件的样式
<style lang="css" scoped>
.el-button>>>span {
color: '#f00'
}
</style>
2、当项目中使用的 css 扩展语言是 less, 需要使用 /deep/ 或者 ::v-deep 深度选择器来修改 外用第三方组件的样式
<style lang="less" scoped>
/deep/.el-button {
span {
color: '#f00'
}
}
.el-button::v-deep {
span {
color: '#f00'
}
}
</style>
3、当项目中使用的 css 扩展语言是 node-sass, 需要使用 /deep/ 或者 ::v-deep 深度选择器来修改 外用第三方组件的样式
<style lang="sass" scoped>
.el-button::v-deep {
span {
color: '#f00'
}
}
/deep/.el-button {
span {
color: '#f00'
}
}
</style>
4、当项目中使用的 css 扩展语言是 dart-sass, 需要使用 ::v-deep 深度选择器来修改 外用第三方组件的样式,dart-sass不支持 /deep/ 和 >>> 的写法
<style lang="scss" scoped>
.el-button::v-deep {
span {
color: '#f00'
}
}
</style>
注意:
① 操作符 >>> 可能会因为无法编译而报错,可以使用 /deep/
② vue3.0 中使用 /deep/ 会报错,更推荐使用 ::v-deep
③ 对于使用了 css 预处理器(scss 、sass、 less)时,深度选择器 ::v-deep 比较通用
更多推荐
所有评论(0)