解决VUE组件内不能更改第三方插件样式

深度作用选择器（ >>> ）

严格来说，这个应该是vue-loader的功能。”vue-loader”: “^12.2.0”

在项目开发中，如果业务比较复杂，特别像中台或B端功能页面都不可避免的会用到第三方组件库，产品有时会想对这些组件进行一些UI方面的定制。如果这些组件采用的是有作用域的CSS，父组件想要定制第三方组件的样式就比较麻烦了。深度作用选择器( >>> 操作符)可以助你一臂之力。

上面的child组件中 .child-title 的作用域CSS设定字体大小为12px，现在想在父组件中定制为大小20px，颜色为红色。

效果妥妥的。但是别高兴太早，注意到上面的style使用的是纯css语法，如果采用less语法，你可能会收到一条webpack的报错信息。

ERROR in ./~/css-loader!./~/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-960c5412","scoped":false,"hasInlineConfig":false}!./~/postcss-loader!./~/less-loader!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/components/parent.vue
Module build failed: Unrecognised input
 @ /src/components/parent.vue (line 22, column 6)
 near lines:
   .parent-custom {
        >>> .child-title {
           font-size:20px;

上面的报错信息其实是less语法不认识 >>>。(less的github issue上有人提议支持>>>操作符，但本文使用的v2.7.3会有这个问题)

解决方案是采用的less的转义(scaping)和变量插值(Variable Interpolation)

•  

对于其他的css预处理器，因为没怎么用，不妄加评论，照搬一下文档的话。

有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 操作符取而代之——这是一个 >>> 的别名，同样可以正常工作。