关于chrome:vue-css-deep穿透深度查询样式在chrome89-edge最新版本中无效问题

10次阅读

共计 833 个字符,预计需要花费 3 分钟才能阅读完成。

利用 vue 开发我的项目过程中,控制台始终有正告⚠️ 揭示如下图,然而始终没有解决,因为大略上网查了一下据说只有在vue-cli3 以上版本不能够,思考到我的项目应用的是vue2.5.17, 所以就懒得弄了,直到最近 chrome 与 edge 浏览器更新版本后,问题呈现了(看来新的框架技术和浏览器都摈弃了这个货色),才想起来解决这个问题;

[Deprecation] /deep/ combinator is no longer supported in CSS dynamic profile. It is now effectively no-op, acting as if it were a descendant combinator. /deep/ combinator will be removed, and will be invalid at M65. You should remove it. See https://www.chromestatus.com/… for more details.

关上给出的链接,过滤查问发现,有对于 /deep/ 破除后的解决办法:

地址:https://www.chromestatus.com/…

大略了解应该是 /deep/ 基本上有效了,间接替换成“”空格,或者 >>> 代替解决;

于是,在我的项目中全局替换 /deep/ 为空格,然而局部页面会有错乱问题,于是将替换为空格后,依然有效的款式局部,增加 >>>, 竟然能够了,然而对于 Sass Less 之类的预处理器是无奈正确解析 >>> 的,所以要保障款式是 css 文件;

还有一点要强调,>>>在 html 单页面下貌似有效,在 vue 我的项目中无效;

我的项目问题根本解决后,做一下汇总的状况下,上网查看对于款式穿透,发现除了 >>>、/deep/ 外,还有一个::v-deep,写法如下:
`
<style lang=”scss” scoped>
/ 用法 1 /
.a{
::v-deep .b {}
}
/用法 2 /
.a ::v-deep .b {}
</style>
`
以上,是我的项目上值得记录的问题解决办法;

正文完
 0