Question
Vuetify: colors are not showing up
I'm trying to integrate Vuetify to my existing Vue project, but the colors are not showing up correctly. I'm following the guide at https://vuetifyjs.com/en/getting-started/quick-start -> existing applications.
The css file seems to be somehow loaded correctly as buttons seems to be highlighted with shadows and there are some click effects. However the colors and the text are not showing up correctly:
My main.js
import Vue from "vue";
import App from "./App";
import Vuetify from "vuetify";
import router from "./router";
import "../node_modules/vuetify/dist/vuetify.min.css";
Vue.config.productionTip = false;
Vue.use(Vuetify);
/* eslint-disable no-new */
new Vue({
el: "#app",
router,
components: { App },
template: "<App/>"
});
My component.vue
<template>
<div class="hello">
<v-btn color="success">Success</v-btn>
<v-btn color="error">Error</v-btn>
<v-btn color="warning">Warning</v-btn>
<v-btn color="info">Info</v-btn>
</div>
</template>
<script>
// Removed for simplicity
</script>
<style lang="stylus" scoped>
@import '../../node_modules/vuetify/src/stylus/main' // Ensure you are using stylus-loader
</style>