vue：样式穿透

一、什么叫 vue 样式穿透

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

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

// index.scss 文件
.basic_form{
    & >>> .ivu-form-item-label {
       font-size: 16px;
       font-weight: bold;
   }
}
// xxx.vue 引入 index.scss 文件
<style lang="scss" scoped>
@import './index.scss'; // 
</style>

二、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 文件
<style lang="less " scoped>
@import './index.less '; // 
</style>