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

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