vue-loader深度作用選擇器無效解決辦法（修改iview組件樣式）

vue深度選擇器官方資料：https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors

最近想修改iview 組件的樣式，一直是拿着iview樣式，自己重新仿造了iview組件格式，但是今天用到了穿梭框，看着重寫特別麻煩，搜大量資料發現vue提供了通過父類修改子組件的深度選擇器功能，與其相關的是vue-router 以及vue-loader

但是按照官方資料發現其一直無效，父組件修改不了子組件樣式，查了一天資料，終於找到了原因,，原來是版本問題

vue-loader 需要 11.2.0以後版本才支持

vue-router需要 2.2.0以後版本才支持

現在貼出我的測試代碼，vue-router 用的3.0.7

vue-loader使用了12.0.0，同時由於vue-style-loader3.0.0（大家應該知道vue-loader和vue-style-loader必須匹配吧）

測試代碼

<template>
    <div style="margin-top: 20%">
        <Transfer
                :data="data4"
                :target-keys="targetKeys4"
                :render-format="render4"
                @on-change="handleChange4"></Transfer>
    </div>
</template>

<script>
    export default {
        name: 'Test',
        data () {
            return {
                data4: this.getMockData(),
                targetKeys4: this.getTargetKeys()
            }
        },
        methods: {
            getMockData () {
            ......
        }
    };
</script>

<style scoped lang="css">
    /*.ivu-transfer >>> .ivu-transfer-list-header{*/
        /*background-color: red;*/
    /*}*/
    .ivu-transfer /deep/ .ivu-transfer-list-header{
        background-color: red;
    }
</style>

根據官網，使用>>> 或者 /deep/ 均可以實現修改樣式。將穿梭框頭背景顏色設置爲紅色