sass/scss遇上scope时 与深度作用选择器产生的化学反应

问题解释

Vue为了让scoped有效会在编译的时候为每个元素添加[data-v-xxx]，当你引入第三方组件的时候，这个[data-v-xxx]只会加在组件的第一层，内层元素不会添加

// 对于element的checkbox组件
.el-checkbox-group {
    margin: 10px;
    .el-checkbox.is-checked {
        .el-checkbox__label {
            color: #606266;
        }
    }
}

// 将编译成
.el-checkbox-group[data-v-6de9570b] {
    margin: 10px;
}
.el-checkbox-group[data-v-6de9570b] .el-checkbox.is-checked[data-v-xxx] .el-checkbox__label[data-v-xxx] {
    color: #606266;
}

.el-checkbox-group {
    margin: 10px;
    /deep/ .el-checkbox.is-checked {
        .el-checkbox__label {
            color: #606266;
        }
    }
}

// 将编译成
.el-checkbox-group[data-v-6de9570b] {
    margin: 10px;
}
.el-checkbox-group[data-v-6de9570b] .el-checkbox.is-checked .el-checkbox__label {
    color: #606266;
}

问题解释

官网对scoped css的解释