Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Use Quasar variables in SCSS stylesheets (incomplete)

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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment