Why is app.scss not acting globally?
-
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?
-
@chillikid I think the way quasar is working here, is that any component that has
<style lang="scss">
will getquasar.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?