Customizing Colors Using Sass Variables
I just tried to modify the
quasar.variables.scssfile 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
$primaryvariable equal to the
$blue-7sass 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.
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
Any idea how I can use the sass variables to set the primary and other color variables used in quasar?
$blue-7 : #1e88e5 !default
use this above primary and then assign the variable
I encountered the same issue. The proposed solution works but adds (imho) unnecessary code duplication. As far as I can see the clean approach  would be to import the file with the SASS variable definitions . But I have no idea how that import path should look like.
beets last edited by
@perelin You could try:
I’ve never done it, but it should work okay if you’re only defining colors in your
quasar.variables.sassfile. 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.sassinto my own
quasar.variables.sassfile. I don’t think they’re going to ever change.