Including npm package with Vuetify dependency overrides/resets styling

[silvester-pari]

Hello,

first of all thanks for this great template! Really like it so far. However, I am experiencing a strange problem:

If I include a component from npm that uses Vuetify itself (for example: v-stripe-elements, but also others), then the blog styling is overridden with default Vuetify styling. For example: font-size

If I inspect rendered font-size CSS on a normal page (without npm component), it shows correctly 15px:

• font-size: 15px (from _variables.scss, imported in BaseLayout.vue in blog repo)
• font-size: 16px (from default Vuetify style vuetify.css in blog repo)

But, if I go to a page where a external npm component is used, it shows 16px:

• font-size: 16px (from default Vuetify style main.sass in Vuetify package!)
• font-size: 15px (from _variables.scss, imported in BaseLayout.vue in blog repo)
• font-size: 16px (from default Vuetify style vuetify.css in blog repo)

I have tried for many hours finding the issue, also tested in new projects with Vuetify, couldn't reproduce the problem. Every time I import it to an other Vuetify project, it works. If I import it here into vuepress-theme-blog-vuetify, it "breaks" the style (resets to default Vuetify style), and the whole layout is broken (containers, font sizes, font families, etc.).

Do you have an idea what happens here? Maybe something with the way how styles are imported in vuepress-theme-blog-vuetify?

I would be very very happy for any help! :blush:

[silvester-pari]

Ah, could it be related to this issue? https://github.com/vuejs/vuepress/issues/1099