vue修改样式不成功

mryangzc

于 2019-07-08 08:40:10 发布

阅读量2k

点赞数

分类专栏： VUE 文章标签： vue修改样式不成功 deep scss scoped

本文链接：https://blog.youkuaiyun.com/Mr_yangzc/article/details/95042429

版权

VUE 专栏收录该内容

20 篇文章

订阅专栏

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>

在这里插入图片描述