title: css or styles inside imported npm ui componnent library not working
body: <p>My ui component library is developed as vue js plugin with bootstrap and bootstrap-vue and i am importing this in another vue js project which also uses bootstrap and bootstrap-vue. This projects runs standalone without an issue.</p>
  
  <p>I have some sample html below which works fine when run the plugin standalone.</p>
  
  <pre><code>  &lt;div class="row"&gt;
      &lt;h5&gt;this is h5 header&lt;/h5&gt;
      &lt;h1&gt;this is h1 header&lt;/h1&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>But when i import this npm package in another app some styles are not loading or overwritten.</p>
  
  <p>Below are the styles rendered inside my main app browser .</p>
  
  <pre><code>  .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;
    }
  </code></pre>
  
  <p>I tried to look where the issue is and when inspected the div element not rendering as expected i see the div block style is striked out by user agent style. A screenshot is attached below.</p>
  
  <p><a href="https://i.stack.imgur.com/AdFfb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AdFfb.png" alt="enter image description here"></a></p>
  
  <p>If i don't import bootstrap library again in my main app where ui plugin is used then my plugin ui elements render fine..</p>