javascript - Vuetify Chip breaks in Production

Question

I am using v-chip to act as an info-banner, the v-chip is within a Vue-Leaflet map. The chip is based on this one here, I was trying to adapt it to my project. Locally I managed to achieve my goal as shown by the picture below;

The issue occurs when I deploy my new v-chip feature with firebase hosting, the chip breaks as shown below;

For some reason, it is not showing as it should in production. Here is a link to the current deployed implementation. This is the Repo and the code line between lines 72 and 79, below is the code 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>`

Things I have tried

• I tried to pick out the differences between My code pen example versus Deployed app by inspecting the classes used by both chips and both chips used the exact same classes, therefore ruling out missing class.
• I have tried copying the CSS directly inspecting the CSS in classes used by the codePen example and implementing it in the local repo just for good measure.

标签： javascripthtmlcssvue.jsleaflet

Answer 1

您没有调用 v-chip 组件，如果您想获取所有样式，即使您没有在应用程序中调用它，请更改 /src/plugins/ 中的 vuetify.js：

添加缩小样式：

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

Vue.use(Vuetify);

export default new Vuetify({
});