Styjun

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.

There is only 1 component in the app, with scoped css like this:

<style scoped>
 .app-stores
 font-size: 12px;
 text-align: center;
 

 .app-stores img
 max-width: 190px;
 

 .padded-checkout-btn 
 padding: 10px;
 
</style>

And then I use it in the component like so:

 <v-btn class="padded-checkout-btn" color="green lighten-1" :disabled="!isCheckoutable()" @click="progressStepper(2)">Checkout currencySymbol + toPrice(calculateTotal())</v-btn>

Now if I run npm run dev and view it locally in a browser, it looks as I expect with the padding:

However if I run npm run build (no changes at all to code) and upload to a site, the padding seems to disappear:

I checked the built css file and it does seem to be there:

.padded-checkout-btn[data-v-dedb1744]padding:10px

And if I inspect the resulting source I can see it declared there:

<button data-v-dedb1744="" type="button" class="padded-checkout-btn v-btn theme--light green lighten-1"><div class="v-btn__content">Checkout £7.00</div></button>

Question: 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?

dev and build are defined like this:

"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"

Fixed. Thanks to @Strelok for nudging me in the right direction. It's do with the ordering in which the css is applied. Change the declaration to:

.padded-checkout-btn 
 padding: 10px !important;

ensured it was applied after everything else (I guess...)

Still don't really understand why it works on Dev build and not prod build though.