vue 项目中的scoped

加了scoped的样式，在打包后，就会给同一个带有scoped的style里面的样式增加一段特殊标识，看下面例子就晓得了：

<style scoped>
    .one h1{
        font-size: 50px;
        color: red;
    }
    h2{
        color: green;
    }
    h4{
        color: cyan;
    }
</style>
/*打包后在.css文件中就成了如下：*/
.one h1[xxxxx]{
    font-size: 50px;
    color: red;
}
h2[xxxxx]{
    color: green;
}
h4[xxxxx]{
    color: cyan;
}
/*这里的xxxxx在同一个scoped里面的都一样，不同的不一样*/

这就是为什么引入其他组件时，在带有scope的style里改变不了组件的样式了（这个组件是带有scoped的,默认就是带有scoped,个人也是极喜欢的）;如下：

/*比如这里引入一个组件，现在我要改变这个组件中的h1*/
<style scoped>
h1{
    color: yellow;
    font-size: 20px;
}
</style>


/*打包后，就成了*/
h1[2222222]{
    font-weight:700;
    color: yellow;
    font-size: 20px;
}
/*组件中的h1本来却是如下*/
h1[111111]{
    color: yellow;
    font-size: 20px;
}

/*这就是为什么你改不了的原因了,改的不是一个东西h1[xxxx]*/

那要怎么改，也简单，另外用一个不带scoped的style来修改（这部分当然要少），如下

<style>
【这里加上这个模块的特殊标识】h1{
    transform:scale(2);
}
.login-page h1{}
</style>


/*这种打包后是不带标识的*/
h1{
    transform:scale(2);
}
.login-page h1{}

/*加特殊标识是为了不影响其他地方的*/

这又有另一个问题，上面这样我只能给元素加属性，不能改变原有属性？这怎么办呢。1。给这个属性加！important; 2.（我暂时还不知道，哇咔咔。。。。。）