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