Use Quasar variables in SCSS stylesheets (incomplete)

quasar-variables-scss.md

Quasar supports SCSS but the style variables won't be available.
Here's a possible workaround -- incomplete & untested, since I gave up, went ahead and used stylus. (This is guide is primarily directed at future me, should this become more compelling in the future.)

Install stylus-converter

yarn add --dev stylus-converter

Create an ad-hoc Webpack plugin that runs the converter. My node foo isn't great, so I'll stick with npx.

// quasar.conf.js
module.exports = function (ctx) {
  return {
    // ...
    build: {
     // ...
      extendWebpack (cfg) {
         // ...
         cfg.plugins.push({
          apply: (compiler) => {
            compiler.hooks.beforeCompile.tap('AuslightScssizeStylVars', (compilation) => {
              const exec = require('child_process').exec
              exec('npx stylus-converter -i node_modules/quasar/src/css/variables.styl -o src/css/quasar.variables.default.scss')
              exec('npx stylus-converter -i src/css/quasar.variables.styl -o src/css/quasar.variables.local.scss')
            })
          }
        })

Import in component

// foo.vue
<style lang="scss">
  // really not sure about paths here
  @import 'quasar.variables.default'
  @import 'quasar.variables.local'
</style>