How to share and access SASS variables/mixins etc. when using Meteor+Vue?

VueJS
1

Hey everyone! I’m currently building a Meteor+Vue application and am using both fourseven:scss as well as akryum:vue-component which provides SASS support in a different way—https://github.com/meteor-vue/vue-meteor/tree/master/packages/vue-component

I was wondering what would the right way to share the SCSS variables and mixins that I put in a global file among the Vue SFC components? Do I have to import these every single time into the SFCs or is there a way to do it just once and have all the SFCs access it? I’m also guessing fourseven:scss is incompatible with Meteor+Vue.

2

I believe you can import it in the root SFC of your app as a global style which is the default if you do not have a scoped attribute in the tag: https://vue-loader.vuejs.org/guide/scoped-css.html#mixing-local-and-global-styles

But I never used fourseven:scss. I am using the CSS classes of Quasar: https://quasar-framework.org/

3

I tried to do that Jacques and I don’t have it with scoped attribute but it still doesn’t persist throughout other child components.