vue:样式穿透

一、什么叫 vue 样式穿透

在 vue 开发过程中,可能会遇到修改 iview UI 组件样式的时候,无效的问题,在网页检查页面元素的时候发现自己写的样式不生效,原因是因为 中scoped 的问题导致,所以我们需要用到样式穿透

二、vue 中 lang="scss" 样式穿透,用 >>>

// index.scss 文件
.basic_form{
    & >>> .ivu-form-item-label {
       font-size: 16px;
       font-weight: bold;
   }
}
// xxx.vue 引入 index.scss 文件

二、vue 中 lang="less" 样式穿透,用 /deep/

// index.less 文件
.tabs{
    /deep/ .ivu-tabs-tab{
        font-size: 20px;
    }
    /deep/ .ivu-tabs-bar{
        margin-bottom: 0;
    }
}
// xxx.vue 引入 index.less 文件

你可能感兴趣的:(vue:样式穿透)