CODEWITHSUNDEEP
vue.jswebpacksasssass-loader
maxshuty
maxshuty

Reputation: 10662

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.

Upvotes: 2

Views: 995

Answers (1)

maxshuty
maxshuty

Reputation: 10662

In this scenario you do not need to worry about how webpacks CSS loaders are working.

You can simply go into your main.js and import '@/styles/globals.scss' to load the styles globally.

Upvotes: 1

Related Questions