Customizing Colors Using Sass Variables



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



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


Log in to reply