[v1 - Request] Make file name quasar-variables.styl the same name as in import directive

[DmitrijOkeanij]

Now file name has name quasar.variables.styl
But if I need to import it, I need to make this @import 'quasar-variables'
In first place there is . (dot), in second - (dash)
Different naming in unclear and strange.

I think It will be good to make in both places the same way.

[pdanpdan]

They are different things.

The file quasar.variables.styl is the file where you can override the default stylus variable. It is read between reading the initial variables and reading the styles that use variables.

The @import '~quasar-variables' imports the resultin variable (initial variables overriden by quasar.variables.styl).

[DmitrijOkeanij]

Thanks! Now I understand.

[rstoenescu]

The @import '~quasar-variables' imports Quasar's variables and also your overrides from quasar.variables.styl.

[kimini507]

Hi, I just created a new project using the v1.

I tried to override some variables in quasar.variables.styl and they reflected properly when using classes like text-primary

But when I import the variables inside my component using @import '~quasar-variables', the variables are rendered with the original values.

Am I doing something wrong?

in my quasar.variables.styl

$primary   = #B92E3E 

in my component (div shows as blue instead of red)

<style lang="stylus">
@import '~quasar-variables'

div.active
  background-color: $primary
</style>

[DmitrijOkeanij]

Mabe wrong file name quasar.variables.style => quasar.variables.styl
And the second idia to test with dev tools did style apllied?

[kimini507]

Sorry, updated the comment, it is indeed .styl

And yes, checking in devtools, the original value for $primary was applied which is #027BE3 instead of the custom value.

For now I just imported the quasar.variables.styl directly in my component

[DmitrijOkeanij]

But custom style is or not is?
It is not applied, or applyed with wrong color?
Sometimes helps be to add !important to style background-color: $primary !important to override

[kimini507]

The style is applied but the value of $primary reflected shown in the dev tools is the original one instead of the value defined in quasar.variables.styl

in my quasar.variables.styl

$primary   = #B92E3E 

my component style

<style lang="stylus">
@import '~quasar-variables'

#SOME_ID.active
  background-color $primary
</style>

but in dev tools it looks like this

#SOME_ID.active {
  background-color: #027BE3
}

instead of my expected $primary value which is #B92E3E

[rstoenescu]

@kimini507 Everything regarding this works correctly. Not sure what version you are using as you haven't mentioned, but regardless, please join our Discord so a member of the Staff can help you in figuring out what you are doing wrong. Thanks.

[kimini507]

Noted on this @rstoenescu , thanks for the reply.

By the way, just to add, the version I'm using is v1.0.0-beta.10 using vue-cli 3

[rstoenescu]

Fixed it in vue-cli-plugin-quasar v1.0.0-beta.1 (will be available shortly).
There is a breaking change though. In /src/styles/quasar.variables.styl, you need to change:

@import '~quasar-variables'

to

@import '~quasar-variables-styl'