vue less scope for adding global style style, style or add methods for html body like this page app outer element

1, vue less scope to add style global style.

scenes to be used:

E.g 

<div class="bd" v-html="htmlStr"></div>

其中， htmlStr = '<span class="title">标题</span>'

 

If we use scoped style, .bd .title {} can not take effect.

You can use deep point. E.g

.bd >>> .title{}

It can work. Because less loader etc. loaders will automatically ignore >>>

Note that, part of the loader >>> can not be resolved, can be replaced / deep /

.bd /deep/ .title{}

Both methods are equivalent.

2, or a body provided element properties, etc. app html page in a separate layer.

First of all, we think, of course, is not a new style with a scoped tags within the page. But after this writing, we find other pages also receive pollution. Therefore, consider adding created by the statement cycle, then a class way again beforeDestroyed cycle removed.

E.g:

created() {
    document.body.classList.add('body-home');
  },
  beforeDestroy() {
    document.body.classList.remove('body-home');
  },