Why is app.scss not acting globally?

[chillikid]

Hi,

I have
css: [“app.scss”],

in my config, but it appear my app.scss is not acting globally and I have to import it into all my components. However any variables I put in quasar.variables.scss act globally in all my components.

I’ve done a bit more testing and it is a strange situation.

1/. I declare variables in app.scss then use them in a page - I get a variable not defined error.
2/. I put an @import app.scss into the page - now they work - BUT that obviously defeats the point of having global variables.
3/. I then tried @import app.scss into quasar.variables.scss (as the variables in quasar.variables.scss were acting globally) - I get an error message that app.scss is already being loaded.

So it looks like something is certainly wrong.

4/. I then created styles.scss and @import it into quasar.variables.scss . Now the variables in styles.scss all work globally as expected. However, this doesn’t seem the correct way and I would like to understand what is actually going wrong with app.scss.

Any ideas on what is happening?

[beets]

@chillikid I think the way quasar is working here, is that any component that has <style lang="scss"> will get quasar.variables.scss imported first, but it won’t import any other file.

If you’re just looking to define vars, why not just put them in the quasar.variables.scss file?