Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why does CSS render differentlyt between `npm run dev` vs `npm run build`?

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:

correct padding

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

incorrect padding

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"
}
like image 371
Manish Patel Avatar asked Mar 28 '19 09:03

Manish Patel


People also ask

What is the difference between npm run dev and npm run build?

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.

What is the difference between next dev and next start?

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.

What does npm run build do?

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.


1 Answers

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.

like image 191
Manish Patel Avatar answered Sep 22 '22 16:09

Manish Patel