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.

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.