title: Why does CSS render differentlyt between `npm run dev` vs `npm run build`?
body: <p>I have a simple(ish) VueJs (2.5.2) app with a dependency on vuetify (1.5.6). Project was created using Vue cli via IntelliJ, so it's a standard structure.</p>
  
  <p>There is only 1 component in the app, with scoped css like this:</p>
  
  <pre><code>&lt;style scoped&gt;
   .app-stores{
    font-size: 12px;
    text-align: center;
   }
  
   .app-stores img{
    max-width: 190px;
   }  
  
   .padded-checkout-btn {
    padding: 10px;
   }
  &lt;/style&gt;
  </code></pre>
  
  <p>And then I use it in the component like so:</p>
  
  <pre><code> &lt;v-btn class="padded-checkout-btn" color="green lighten-1" :disabled="!isCheckoutable()" @click="progressStepper(2)"&gt;Checkout {{currencySymbol + toPrice(calculateTotal())}}&lt;/v-btn&gt;
  </code></pre>
  
  <p>Now if I run <code>npm run dev</code> and view it locally in a browser, it looks as I expect with the padding:</p>
  
  <p><a href="https://i.stack.imgur.com/QYxKT.png" rel="noreferrer"><img src="https://i.stack.imgur.com/QYxKT.png" alt="correct padding"></a></p>
  
  <p>However if I run <code>npm run build</code> (<em>no</em> changes at all to code) and upload to a site, the padding seems to disappear:</p>
  
  <p><a href="https://i.stack.imgur.com/bHMsp.png" rel="noreferrer"><img src="https://i.stack.imgur.com/bHMsp.png" alt="incorrect padding"></a></p>
  
  <p>I checked the built css file and it does seem to be there:</p>
  
  <pre><code>.padded-checkout-btn[data-v-dedb1744]{padding:10px}
  </code></pre>
  
  <p>And if I inspect the resulting source I can see it declared there:</p>
  
  <pre><code>&lt;button data-v-dedb1744="" type="button" class="padded-checkout-btn v-btn theme--light green lighten-1"&gt;&lt;div class="v-btn__content"&gt;Checkout £7.00&lt;/div&gt;&lt;/button&gt;
  </code></pre>
  
  <p><strong>Question</strong>: Why are they different? Even if somehow the CSS is hidden, the whole point of running dev vs build is that they're the same? Any ideas as to how to diagnose/fix?</p>
  
  <p><code>dev</code> and <code>build</code> are defined like this:</p>
  
  <pre><code>"scripts": {
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  "start": "npm run dev",
  "unit": "jest --config test/unit/jest.conf.js --coverage",
  "test": "npm run unit",
  "lint": "eslint --ext .js,.vue src test/unit",
  "build": "node build/build.js"
  }
  </code></pre>