I've been working on a vuetify application in vue cli, but I'm facing some issues with CSS styles not being applied correctly.
For instance, when using a v-text-field, the input element ends up with borders set by the user agent stylesheet.
I came across this post and tried importing VTextField explicitly in my main.ts file. This did get the correct CSS to load and apply to my input field, but only in development mode (npm run serve). When I build the app for production (npm run build), the styles are not linked.
Any suggestions?
main.ts (with explicit component loading like VTextField):
import "material-design-icons-iconfont/dist/material-design-icons.css"; // Make sure you're 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,
...
}