vue.js - How to Access Quasar CSS Variables Within Script? - Stack Overflow

I'm using Quasar 2.17.7.

If I have the below styles in my quasar.variables.scss file:

$company-base: #3c3c3b;
$company-accent: #89c3ce;

$primary: #1976d2;
$secondary: #26a69a;
$accent: #9c27b0;

How can I access these in a script tag? For example...

const accentColor = $q.getColour('company-accent');

I'm using Quasar 2.17.7.

If I have the below styles in my quasar.variables.scss file:

$company-base: #3c3c3b;
$company-accent: #89c3ce;

$primary: #1976d2;
$secondary: #26a69a;
$accent: #9c27b0;

How can I access these in a script tag? For example...

const accentColor = $q.getColour('company-accent');

• vue.js
• sass
• vuejs3
• quasar-framework
• quasar

Share Improve this question Follow edited Feb 4 at 18:04 kissu 47k1616 gold badges9090 silver badges189189 bronze badges asked Feb 4 at 14:09 RejestoRejesto 9133 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

Given the docs, you can apparently you can access it this way

import { getCssVar } from 'quasar'

const accentColor = getCssVar('company-accent'); // #89c3ce

And write to it this way

import { setCssVar } from 'quasar'

setCssVar('company-accent', '#newColor');