Custom variables added to quasar.variables.sass seem to be ignored

[mboeni]

Hi

I am trying to add my own custom sass variables to ‘quasar.variables.sass’, like $dark-primary : #ff0000 but for some reason they’re ignored. Judging by the documentation, this should work out of the box.

Note: The custom branded colors (i.e. primary, secondary and such) work fine.

Any ideas?

Cheers,
M.

Here’s the full quasar.variables.sass file for reference:

// Quasar Sass (& SCSS) Variables
// --------------------------------------------------
// To customize the look and feel of this app, you can override
// the Sass/SCSS variables found in Quasar's source Sass/SCSS files.

// Check documentation for full list of Quasar variables

// Your own variables (that are declared here) and Quasar's own
// ones will be available out of the box in your .vue/.scss/.sass files

// It's highly recommended to change the default colors
// to match your app's branding.
// Tip: Use the "Theme Builder" on Quasar's documentation website.

// NX custom colors

$primary   : #364552
$secondary : #6A7C89
$accent    : #ad2bc4

$positive  : #21BA45
$negative  : #e84a3f
$info      : #31CCEC
$warning   : #F2C037

$dark-primary   :   #ff0000

[mboeni]

Anyone? I’m kinda stuck on this one…Is there another (intended) way to define global variables to be used for styling the app?

[Hawkeye64]

Sorry, I have never tried it. Just wanting you to know ppl are seeing this.

[nobilik]

Hi! Did you find a solution? I’ve the same problem

[mboeni]

@nobilik Not really…I built my own system of defining the required colors app-wide, but it’s a bit of a hack…I’d love to fix this later. It does look like it’s a bug at the Quasar end, if others haven the issue too…

[Hawkeye64]

have you tried changing any of the colors to see if that works?
Also, even if you add a variable, you have to use it somewhere to be included into your css

[nobilik]

@Hawkeye64 Changing default variables works well. But where to define .bg-my_color class to be accessible globally? If I define classes in my index.vue

<style lang="scss">
.text-brand {
  color: $brand;
}
.bg-brand {
  background: $brand;
}
</style>

it works

[thibautguedou3]

@nobilik @mboeni You can edit the content of the app.sass file in the css folder of src to add a custom variable with the name you want. For instance in my project I did this:

$myColor: #111234;

.text-my-color
  color: $myColor

.bg-my-color
  color: $myColor

This is basically the same approach as the one @nobilik suggested but it’s located in the folder dealing with style in your application. Normally thanks to this, you will be able to use bg-my-color, text-my-color and also pass my-color as color prop everywhere in your app

[mboeni]

@thibautguedou3 thanks, I’ll give that a shot and it’s a bit cleaner than my approach too…

[nobilik]

@thibautguedou3 OMG! I was doing the same, but colons were forgotten Thanks!