1、vue less scope的样式中添加全局样式。
使用场景:
例如
<div class="bd" v-html="htmlStr"></div> 其中, htmlStr = ‘<span class="title">标题</span>‘
如果我们使用 scoped样式, .bd .title{} 则无法生效。
可以使用深指向。例如
.bd >>> .title{}
则可以对起作用。 因为less loader等loaders 会自动忽略 >>>
注意,部分loader对 >>> 不能解析, 可以更换为 /deep/
.bd /deep/ .title{}
两种方法是等价的。
2、在页面中单独设置body或者html等app外层的元素属性。
首先,我们想到的当然是页面内新增一个 不带scoped的style标签。 不过这样写了之后,发现其他页面也收到污染。 因此,考虑通过在created声明周期中进行添加,然后再beforeDestroyed周期中移除一个class的方式。
例如:
created() { document.body.classList.add(‘body-home‘); }, beforeDestroy() { document.body.classList.remove(‘body-home‘); },
vue less scope的样式中添加全局样式,或者针对本页面的 html body等app外层元素添加样式的一些方法