vue中修改组件样式不起作用

原因：

<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>