为外部 vue.js 库编写 Scoped SCSS

Question

我正在使用一个名为 vue-select 的库，并且像往常一样，您需要将其 CSS 文件作为全局导入导入 App.vue。

然后我用作用域 SCSS 覆盖它。下面是正在生成的 HTML 和 CSS 代码。

<v-select :options="array" v-model="selectedItem" class="mx-5"></v-select>

 // below is Generated HTML markup

<div data-v-2059d297="" dir="auto" class="v-select mx-5 vs--single vs--searchable">
 <div id="vs1__combobox" role="combobox" aria-expanded="false" aria-owns="vs1__listbox" aria-label="Search for option" class="vs__dropdown-toggle">
  <div class="vs__selected-options"> 
   <input aria-autocomplete="list" aria-labelledby="vs1__combobox" aria-controls="vs1__listbox" type="search" autocomplete="off" class="vs__search">
  </div>
 </div>
</div>

注意 data-v-2059d297 属性仅适用于 v-select div 而不是 div 内。

.v-select {
  margin-top: 30px;

  .vs__dropdown-toggle {
    border: none;
    border-bottom: 2px solid #707070;
    border-radius: 0;
  }
  .vs__dropdown-menu {
    max-height: 200px;
  }
 }

通过这段代码生成的 CSS 是：

data-v-2059d297 被添加到不存在的 vs__dropdown-menu 旁边。

我需要使用不同的 CSS 重用这个 v-select。

关于如何克服这个问题的任何解决方案？

Answer 1

像这样用 ::v-deep 试试

::v-deep .v-select {
  margin-top: 30px;

  .vs__dropdown-toggle {
    border: none;
    border-bottom: 2px solid #707070;
    border-radius: 0;
  }
  .vs__dropdown-menu {
    max-height: 200px;
  }
 }