title: vue-cli webpack precedence of styles
body: <p>I have a problem with vue webpack scaffolding from the vue cli regarding the way it handles style scope in dev and prod
  in a component I have:</p>
  
  <pre><code>&lt;div class=input-group&gt;&lt;input class="form-control someformcontrol" ...
  
  &lt;style lang="sass" scoped&gt;
  .someformcontrol
      z-index:0
  </code></pre>
  
  <p>and my project uses <strong>bootstrap-sass</strong>.</p>
  
  <p>with <code>npm run dev</code> I get </p>
  
  <pre><code>. someformcontrol[data-v-2929f1fc] {
      z-index: 0;
  }
  .input-group .form-control {
      position: relative;
      z-index: 2;
      float: left;
      width: 100%;
      margin-bottom: 0;
  }
  </code></pre>
  
  <p>that is, both a local component style and the bootstrap sass style are loaded up, but the local style overrides the bootstrap style.</p>
  
  <p>but with <code>npm run prod</code> I get the order reversed:</p>
  
  <pre><code>.input-group .form-control {
      position: relative;
      z-index: 2;
      float: left;
      width: 100%;
      margin-bottom: 0;
  }
  . someformcontrol[data-v-2929f1fc] {
      z-index: 0;
  }
  </code></pre>
  
  <p>in other words, run locally, I get z-index of 0 because the scoped component style overrides bootstrap sass
  but that same thing with npm run build has the orders reversed and the effective z-index becmoes 2 (and the effect is that <strong>I can't override bootstrap sass in scoped component tags with <code>npm run prod</code></strong>). I'm not sure what to look for in <code>build/</code> to address this.</p>