vue中需要更改调用的组件样式不起作用，需要使用/deep/或者::v-deep

/deep/在vue中的使用
1.未使用前

<style lang="scss" scoped>
.tabs-area {
    margin-top: 20px;
//页面不起作用
    .el-tabs__nav {
      width: 100%;
      background: #F7F7F7;
    }
}
</style>

需更改成

<style lang="scss" scoped>
.tabs-area {
    margin-top: 20px;

    /deep/.el-tabs__nav {
      width: 100%;
      background: #F7F7F7;
    }
}
</style>

如果运行npm run dev时报错Syntax Error: SassError: expected selector.

image.png

需要改为：

.tabs-area {
    margin-top: 20px;

    ::v-deep.el-tabs__nav {
      width: 100%;
      background: #F7F7F7;
    }
}