Vuetify style not 100% applied - css

Question

I have a vuetify application that is set up using vue cli. Unfortunately, some CSS styles are not applied properly.
Example: I am using a v-text-field which is rendered fine except that the input element gets borders set by user agent stylesheet.
I saw this post, and followed its advise to explicitly import VTextField in my main.ts. The result is that I do get the correct CSS loaded and applied to my input field, but unfortunately only in dev mode (npm run serve). When I build my app for production (npm run build), the styles are not linked.
Any advise?
main.ts (with explicitly loading components like VTextField):
import "material-design-icons-iconfont/dist/material-design-icons.css"; // Ensure you are using css-loader
import "../node_modules/typeface-roboto/index.css";
import Vue from "vue";
import { VBtn, VCol, VContainer, VList, VRow, VTextField } from "vuetify/lib";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import vuetify from "./plugins/vuetify";
Vue.config.productionTip = false;
Vue.use(vuetify, {
iconfont: "md",
components: {
VBtn,
VCol,
VContainer,
VList,
VRow,
VTextField
}
});
new Vue({
router,
store,
vuetify,
render: h => h(App)
}).$mount("#app");
App.vue:
<v-app>
<TopNavigationbar />
<v-content>
<v-container fluid>
<router-view></router-view>
</v-container>
</v-content>
</v-app>
</template>
<script lang="ts">
import Vue from "vue";
import TopNavigationbar from "./components/TopNavigationbar.vue";
export default Vue.extend({
name: "App",
components: {
TopNavigationbar
},
data: () => ({
//
})
});
</script>
<style lang="scss">
#import "../node_modules/typeface-roboto/index.css";
$font-stack: Roboto, sans-serif;
#app {
font: 100% $font-stack;
}
</style>
And package.json:
{
"name": "rpgbattle-ui",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "./node_modules/.bin/vue-cli-service serve",
"build": "./node_modules/.bin/vue-cli-service build",
"test:unit": "./node_modules/.bin/vue-cli-service test:unit",
"lint": "./node_modules/.bin/vue-cli-service lint"
},
"dependencies": {
"axios": "^0.19.2",
"core-js": "^3.6.4",
"material-design-icons-iconfont": "^5.0.1",
"sockjs-client": "^1.4.0",
"stompjs": "^2.3.3",
"uuid": "^7.0.3",
"vue": "^2.6.11",
"vue-class-component": "^7.2.3",
"vue-property-decorator": "^8.4.2",
"vue-router": "^3.1.6",
"vuetify": "^2.2.26",
"vuex": "^3.3.0"
},
"devDependencies": {
"#types/jest": "^24.0.19",
"#types/sockjs-client": "^1.1.1",
"#types/stompjs": "^2.3.4",
"#types/uuid": "^7.0.3",
"#typescript-eslint/eslint-plugin": "^2.30.0",
"#typescript-eslint/parser": "^2.30.0",
"#vue/cli-plugin-babel": "~4.3.0",
"#vue/cli-plugin-eslint": "~4.3.0",
"#vue/cli-plugin-router": "~4.3.0",
"#vue/cli-plugin-typescript": "~4.3.0",
"#vue/cli-plugin-unit-jest": "~4.3.0",
"#vue/cli-plugin-vuex": "~4.3.0",
"#vue/cli-service": "~4.3.0",
"#vue/eslint-config-prettier": "^6.0.0",
"#vue/eslint-config-typescript": "^5.0.2",
"#vue/test-utils": "1.0.0-beta.31",
"eslint": "^6.8.0",
"eslint-config-airbnb-base": "^13.1.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-import": "^2.20.1",
"eslint-plugin-prettier": "^3.1.2",
"eslint-plugin-vue": "^6.1.2",
"material-design-icons-iconfont": "^5.0.1",
"node-sass": "^4.14.0",
"prettier": "^1.19.1",
"sass": "^1.26.5",
"sass-loader": "^8.0.2",
"typeface-roboto": "0.0.75",
"typescript": "~3.8.3",
"vue-cli-plugin-vuetify": "~2.0.5",
"vue-template-compiler": "^2.6.11",
"vuetify-loader": "^1.3.0"
},
"engines": {
"node": "^10.14.1",
"npm": "^6.4.1"
}
}

Answer 1

I solved the problem by cleaning up my code, not sure which change exactly made the difference:
I had a duplicate call of Vue.use(Vuetify), one in my main.ts (as posted), a second one in the imported file plugins/vuetify.ts.
In the same file (plugins/vuetify.ts), I had a line import Vuertify from "vuetify" which I changed to import Vuertify from "vuetify/lib", according to this documentation.