How to use global stylus variables in vue components' <style> ?

[beeplin]

I read the discussion in http://forum.quasar-framework.org/topic/19/how-to-use-the-stylus-theme-variables-from-inside-components but is still puzzled.

If I do the following, I can access the stylus variables defined in src/themes/app.variables.styl, but cannot access global ones like $red-1 etc.

<style lang="stylus">
  @import '~src/themes/app.variables.styl';
  div { 
    color: $primary; // OK
    background-color: $red-1; // NOT OK
  }
</style>

If I do the following, it fails to compile coz quasar/src/themes/quasar.core.variables.styl cannot be found in @import of stylus part:

<style lang="stylus">
  @import 'quasar/src/themes/quasar.core.variables.styl'; // CANNOT BE FOUND
  @import '~src/themes/app.variables.styl';
  div { 
    color: $primary; // OK
    background-color: $red-1; // NOT OK
  }
</style>

If I import the styl file in script, it seems the <style> part cannot access the variables either:

<script>
  import  'quasar/src/themes/quasar.core.variables.styl';
  ......
</script>
<style lang="stylus">
  @import '~src/themes/app.variables.styl';
  div { 
    color: $primary; // OK
    background-color: $red-1; // NOT OK
  }
</style>

[rstoenescu]

Note tilde-quasar: @import '~quasar/src/themes/quasar.core.variables.styl'

[beeplin]

Thanks~!

One more question: In js we could use require "./themes/app.#{__THEME}.styl" to get the curent theme and load the corresponding stylus variables. Is it possible to do this in stylus's @import? How to access _THEME in stylus?

[rstoenescu]

Technically not possible unfortunately due to Stylus inner-workings :( I may be wrong. Will investigate thoroughly.

[MartinMuzatko]

In latest quasar, it is even easier:

<style lang="styl">
    @import '~variables'
</style>

[gaw89]

@rstoenescu , I am using Quasar 1.0.0-beta.8 and an app created with Quasar CLI, and I cannot use @import '~variables' (as suggested by @MartinMuzatko and documented in the most recent docs), I have to use @import '~src/css/quasar.variables.styl'.

Any suggestions?

[rstoenescu]

@gaw89 For v1.0, @import '~quasar-variables'

[rstoenescu]

Also, this is described in the v1 docs... u sure you are looking at https://v1.quasar-framework.org ?

[gaw89]

Oops! Sorry, I was looking at docs for v0.17.19!

Thanks for the quick response - that worked perfectly.

Awesome framework, by the way! 😄