Customizing Colors Using Sass Variables

[moshemo]

I just tried to modify the quasar.variables.scss file as follows:

$primary: $blue-7;
$secondary: #26a69a;
$accent: #9c27b0;

$positive: #21ba45;
$negative: #c10015;
$info: #31ccec;
$warning: #f2c037;

That is to say, I tried to set the $primary variable equal to the $blue-7 sass variable (which I got from here: https://quasar.dev/style/sass-scss-variables#Variables-list).

However, that did not work. I got the following error message:

Failed to compile.

./node_modules/quasar/dist/quasar.sass (./node_modules/css-loader/dist/cjs.js??ref–8-oneOf-2-1!./node_modules/postcss-loader/src??ref–8-oneOf-2-2!./node_modules/sass-loader/dist/cjs.js??ref–8-oneOf-2-3!./node_modules/@quasar/app/lib/webpack/loader.quasar-sass-variables.js!./node_modules/quasar/dist/quasar.sass)

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):

SassError: Undefined variable: “$blue-7”.

    on line 15 of src/css/quasar.variables.scss

    from line 1 of C:\code\tutorials\quasar\learning-quasar\node_modules\quasar\dist\quasar.sass

$primary: $blue-7;

----------^

Any idea how I can use the sass variables to set the primary and other color variables used in quasar?

Thanks.

[sath26]

$blue-7 : #1e88e5 !default
use this above primary and then assign the variable

[perelin]

I encountered the same issue. The proposed solution works but adds (imho) unnecessary code duplication. As far as I can see the clean approach [1] would be to import the file with the SASS variable definitions [2]. But I have no idea how that import path should look like.

Any ideas?

[1] https://sass-lang.com/documentation/at-rules/use+
[2] https://quasar.dev/style/sass-scss-variables

[beets]

@perelin You could try:

@import '~quasar/src/css/variables'

I’ve never done it, but it should work okay if you’re only defining colors in your quasar.variables.sass file. If you start overriding any of the spacing or sizing variables, I think you’re going to end up in trouble as those aren’t going to be properly defined after the second import of that file that quasar does.

I would probably just copy those values from node_modules/quasar/src/css/variables.sass into my own quasar.variables.sass file. I don’t think they’re going to ever change.