美文网首页
vue中需要更改调用的组件样式不起作用,需要使用/deep/或者

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

作者: 小呆糊总 | 来源:发表于2021-06-01 10:15 被阅读0次

    /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;
        }
    }
    

    相关文章

      网友评论

          本文标题:vue中需要更改调用的组件样式不起作用,需要使用/deep/或者

          本文链接:https://www.haomeiwen.com/subject/gfkwsltx.html