单文件组件里使用自定义组件且sass语法使用scoped属性后样式文件无法匹配问题

[openks]

目的是去掉mint-ui中mt-field上面的border

<mt-field v-model="username" class="first" ></mt-field>
<style lang="scss" scoped>
.first{
  .mint-cell-wrapper{
    background-size: 0;
  }
}
</style>

生成后节点：

<a data-v-8fb79dde="" class="mint-cell mint-field first">
  <div class="mint-cell-left"></div>
  <div class="mint-cell-wrapper">
    <div class="mint-cell-title">
      <span class="mint-cell-text">姓名</span>
    </div>
    <div class="mint-cell-value"><input placeholder="请输入真实姓名" type="text" class="mint-field-core">
      <div class="mint-field-clear" style="display: none;">
        <i class="mintui mintui-field-error"></i>
      </div>
      <span class="mint-field-state is-default">
        <i class="mintui mintui-field-default"></i>
      </span>
      <div class="mint-field-other"></div>
    </div>
  </div>
  <div class="mint-cell-right"></div>
</a>

生成css

.first .mint-cell-wrapper[data-v-8fb79dde] {
  background-size: 0;
}

这样就会无法匹配选中元素

[openks]

通过新增一个非scoped的css 样式解决
scoped 属性会在自定义组件的最外层自动添加一个唯一的属性（比如 data-v-21e5b78）为组件内 CSS 指定作用域
如果要修改自定义组件的样式则不能使用scoped 属性