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

  • 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?


    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

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

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

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

  • @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…

  • 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

  • @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;

    it works

  • @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;
      color: $myColor
      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 🙂

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

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

Log in to reply