Vuetify Chip breaks в производстве

Question

Я использую v-chip в качестве информационного баннера, v-chip находится на карте Vue -Leaflet. Чип основан на этом здесь , я пытался адаптировать его к своему проекту. Локально мне удалось достичь своей цели, как показано на рисунке ниже:

Проблема возникает, когда я развертываю свою новую функцию v-chip с хостингом Firebase микросхема ломается, как показано ниже;

По какой-то причине она не отображается так, как должна быть в производстве. Здесь - ссылка на текущую развернутую реализацию. Это строка Repo и строка code между строками 72 и 79, ниже приведен код snippert,

<div class="text-center">
        <span class="ma-2 v-chip v-chip--outlined v-chip--pill theme--light v-size--default deep-purple accent-4 deep-purple--text text--accent-4">
          <span class="v-chip__content">
            <i aria-hidden="true" class="v-icon notranslate v-icon--left mdi mdi-information-outline theme--light"></i>
            ${placeholder}
          </span>
        </span>
      </div>`

То, что я пробовал

• Я попытался выявить различия между Примером моего кода и Развернутое приложение , проверив классы, используемые обоими чипами, и оба чипа использовали точно такие же классы, поэтому исключаю отсутствующий класс.
• Я попытался скопировать CSS, непосредственно проверяя CSS в классах, используемых в примере codePen , и внедряя его в локальный репозиторий. просто для хорошей меры.

Answer 1

Вы не вызываете компонент v-chip. Если вы хотите получить все стили, даже если вы не вызываете его в своем приложении, измените vuetify. js в / src / plugins /:

Добавьте стили минимизации:

import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import "vuetify/dist/vuetify.min.css"; // Add this

Vue.use(Vuetify);

export default new Vuetify({
});