Vue including global styles without repeating the styles for each component

I have an app and would like to include some global styles that I can use anywhere in the app like this:

.btn { ... } 

In webpack I already have this for _variables.scss to include things like $my-color: $fff and that is wired up like this in my loaderOptions:

{ additionalData: `@import "@/styles/_variables.scss";` } 

Obviously for some global styles I could do the same thing, however, this will cause my styles like .btn to load as many times as components that I have.

Logically it would seem best to just go into my root Vue component and add global <style lang="scss"></style>.

However, I am upgrading a legacy jQuery app and it is being piecemealed and instead of one root app component, I have several roots for parts that have been converted to Vue. I don't have a central place to load these styles.

For instance I have searchBar and checkout apps that are instantiated using Vue.extend (so they are all part of the same instance). There aren't just two apps, there are quite a few. If I include the global styles in the root of any of them it... feels... icky...

Is there any way around this or should I set the global styles in a random app with a TODO to refactor once everything is ported over?

Ideally I would do the same thing I'm doing with the _variables.scss but having the styles duplicated for each component is a non starter for me.