导入的npm ui组件库中的css或样式不起作用

Question

我的ui组件库被开发为带有bootstrap和bootstrap-vue的vue js插件，我将其导入到另一个也使用bootstrap和bootstrap-vue的vue js项目中。此项目独立运行，没有任何问题。

我在下面有一些示例html，当独立运行插件时，它工作得很好。

  <div class="row">
    <h5>this is h5 header</h5>
    <h1>this is h1 header</h1>
  </div>

但是当我在另一个应用程序中导入这个npm包时，一些样式不会被加载或覆盖。

下面是在我的主应用浏览器中呈现的样式。

  .row[data-v-7d767f7c] {
    text-align: left;
  }
  .row {
    display: -ms-flexbox;//striked out
    display: -webkit-box;//striked out
    display: flex;
    -ms-flex-wrap: wrap;//striked out
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
  }

我试图查看问题所在，当检查div元素时，发现div块样式被用户代理样式划掉了。下面附了一张截图。

​

​

如果我不在使用ui插件的主应用程序中再次导入bootstrap库，那么我的插件ui元素呈现良好。

Answer 1

解决了这个问题。我曾经在一个地方使用自定义css，它的类名与引导类名冲突。