Vue修改子组件样式

在Vue组件中，当 <style> 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。效果如下

<template>
    <input></input>
</template>

<style lang="scss" scoped>
    input {
        height: 26px;
    }
</style>

编译之后：

<template>
    <input data-v-3fd1390c></input>
</template>

<style>
    input[data-v-3fd1390c] {
        height: 26px;
    }
</style>

但是，在使用子组件/UI框架的时候，要修改样式是不会生效的，效果如下(以iview为例)：

<template>
    <Input></Input>
</template>

<style lang="scss" scoped>
    .ivu-input-wrapper {
        .ivu-input {
            height: 26px;
        }
    }
</style>

编译之后：

<template>
    <div data-v-3fd1390c class="ivu-input-wrapper ivu-input-wrapper-default ivu-input-type-text">
        <i class="ivu-icon ivu-icon-ios-loading ivu-load-loop ivu-input-icon ivu-input-icon-validate"></i>
        <input autocomplete="off" spellcheck="false" type="text" placeholder="" class="ivu-input ivu-input-default">
    </div>
</template>

<style>
.ivu-input-wrapper  .ivu-input[data-v-3fd1390c] {
    height: 26px;
}
</style>

可以看到，由于作用域问题，只有子组件的根组件被影响，有了data-v-3fd1390c属性，而css编译出来之后是样式的最后一个选择器拥有作用域属性.ivu-input[data-v-3fd1390c]，所以样式不会生效，当然尤大肯定也想到了，所以vue-loader提供了深度作用选择器

根据官方解释，现在需要把css修改为如下方式：

.ivu-input-wrapper {
    ::v-deep .ivu-input{
        height: 26px;
    }
}

编译之后：

.ivu-input-wrapper[data-v-3fd1390c]  .ivu-input {
    height: 26px;
}

如此这般，完美解决。