原因:
<style lang="scss" scoped>
也就是scoped这个东西
scoped的作用:在style标签上添加scoped属性,以表示它的样式作用于当下的模块,可以使组件的样式不相互污染。
所以,把它去掉就可以了。
但是还有一个问题,去掉这个后,所有页面的样式是会相互影响的。
解决办法:
一、在每个页面中,加个容器,给个id 或 class 而且每个页面的都要不一样就行。
二、scoped样式穿透:
scoped虽然避免了组件间样式污染,但是很多时候我们需要修改组件中的某个样式,但是又不想去除scoped属性。
1. 使用/deep/
//Parent
<template>
<div class="wrap">
<Child />
</div>
</template>
<style lang="scss" scoped>
.wrap /deep/ .box{
background: red;
}
</style>
//Child
<template>
<div class="box"></div>
</template>
2. 使用两个style标签
//Parent
<template>
<div class="wrap">
<Child />
</div>
</template>
<style lang="scss" scoped>
//其他样式
</style>
<style lang="scss">
.wrap .box{
background: red;
}
</style>
//Child
<template>
<div class="box"></div>
</template>