Is it possible to create new variables in common.variables.styl in [v^0.17.0]?



  • Recently I came back to use quasar and faced a problem in setting new variables in src/css/themes/common.variables.styl, such as “$quaternary = #848586”.

    On "quasar-framework": "^0.14.1" I used to define new variables in src/themes/app.variables.styl using

    quaternary = #848586
    @css:export
       quaternary $quaternary
    

    However, now in "quasar-cli": "^0.17.0" it seems to not work anymore, and I can’t find a way to make it work.

    Is there a way to define new variables to be imported in @import '~variables' and to be used in components in html (e.g. q-toolbar(color="quaternary"))?

    Thank you.



  • Nevermind, I found the solution poking around a little more.

    What I found it was that it is needed to define .bg-${new-color} and .text-${new-color} and export @css:export.

    $quaternary = #848586
    
    .text-quaternary
      color $quaternary
    .bg-quaternary
      background-color $quaternary
    
    @css:export
      quaternary $quaternary
    

    Then you can use it on .vue files.

    Thank you.