深度作用选择器（>>>）
在项目开发中，不可避免的会使用到第三方的组件库，但是有时提供的组件UI并不能如我们的预期，因此需要自行定制。如果这些组件采用的是有作用域的CSS，父组件想要定制第三方组件的样式就比较麻烦了。
不过vue-loader的一个功能：深度作用选择器可以助我们一臂之力。
<template>
<div>
<h1 class="child-title">
如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作
</h1>
</div>
</template>
<script>
export default {
name: 'child',
data() {
return {}
}
}
</script>
<style scoped>
.child-title {
font-size: 12px;
}
</style>
上面的child组件中 .child-title 的作用域CSS设定字体大小为12px，现在想在父组件中定制为大小20px，颜色为红色。
<template>
<div>
<child class="parent-custom"></child>
</div>
</template>
<script>
import Child from './child'
export default {
name: 'parent',
components: {
Child
},
data() {
return {}
}
}
</script>
<style>
.parent-custom >>> .child-title {
font-size:20px;
color: red;
}
</style>
但是以上的效果只能是使用原生的CSS来写，如果使用了less或者sass来写，则会收到一个报错，因为预处理器无法识别>>>这个符号。
预处理器的解决方案
<style lang="less">
@deep: ~'>>>';
.parent-custom {
@{deep} .child-title {
font-size:20px;
color: red;
}
}
</style>
<style lang="scss">
.parent-custom {
\deep\ .child-title {
font-size:20px;
color: red;
}
}
</style>
