Я пытаюсь интегрировать Vuetify в мой существующий проект Vue, но цвета не отображаются правильно. Я следую руководству по https://vuetifyjs.com/en/getting-started/quick-start → существующим приложениям.
Файл css, кажется, как-то загружен правильно, поскольку кнопки, кажется, выделены тенями, и есть некоторые эффекты щелчка. Однако цвета и текст не отображаются правильно:
Мой 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/>"
});
Мой компонент.
<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>