After developing my app using vuetify and vue cli, everything was running smoothly in the development environment. However, upon running npm run build, a new default #app CSS was generated and it ended up overriding my custom CSS in the final bundled file. This resulted in all the text alignment and margins on my website going haywire. Strangely, this issue only appeared in the production environment.
Here is a screenshot of the CSS in the console
Below is an excerpt from App.vue:
<template>
<div>
<router-view></router-view>
</div>
</template>
<script>
import store from './store'
export default {
store,
name: 'App',
metaInfo: {
title: '',
titleTemplate:
},
created: function () {
}
}
</script>
<style >
#app {
text-align: unset;
margin-top: 0px;
}
</style>