vue 项目中的scoped

Source

加了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.(我暂时还不知道,哇咔咔。。。。。)