vue less scope的樣式中添加全局樣式，或者針對本頁面的 html body等app外層元素添加樣式的一些方法

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');
  },