vue修改样式不成功

1. style 中 scoped 会使 修改的样式 不成功

<style scoped  lang="scss">
@import "../../assets/scss/multipleTest.scss";
.multiple-div {
  display: flex;
  height: 100%;
  flex-direction: column;
  // height: 100vh;
  padding: 0 0 0 20px;
  span {
    margin-top: 16px;
    font-size: 24px;
    text-align: left;
  }

  .multiple-a-tabs {
    text-align: left;
  }
   .ant-tabs-bar {
   display: flex;
   justify-content: space-between
  }
 
}

</style>

在这里插入图片描述

2.如果去掉 scoped 会使 修改的样式成功，但是也会导致其他页面的样式变化

在这里插入图片描述

3.使用 /deep/ 完美解决

<style scoped  lang="scss">
@import "../../assets/scss/multipleTest.scss";
.multiple-div {
  display: flex;
  height: 100%;
  flex-direction: column;
  // height: 100vh;
  padding: 0 0 0 20px;
  span {
    margin-top: 16px;
    font-size: 24px;
    text-align: left;
  }

  .multiple-a-tabs {
    text-align: left;
  }
 /deep/  .ant-tabs-bar {
   display: flex;
   justify-content: space-between
  }
 
}

</style>

在这里插入图片描述