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"
}
Generally you would want to use npm run dev when you're developing the site, and npm run production when it's ready to be deployed. Save this answer.
js, next dev is used to run the app in development mode. On the other hand, next start is used to run the app in production mode, but requires next build to be run first to generate an optimized production build.
npm run build creates a build directory with a production build of your app. Set up your favorite HTTP server so that a visitor to your site is served index.html , and requests to static paths like /static/js/main.<hash>.js are served with the contents of the /static/js/main.<hash>.js file.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With