Conditional load of quasar variables in scss

  • Hi, I’m trying to load quasar.variables.scss conditionally (example: each client use a different theme) and it’s getting harder… I’ve tried passing env variables with sassLoaderOptions and appendData in quasar.config.js, but it looks like only affecto to Component’s styles.

    Any idea about how to solve it?


  • So I’ve solved it with something like:

    extendWebpack (cfg) {
            cfg.module.rules.forEach(rule => {
              if (String(rule.test) === String(/\.sass$/) || String(rule.test) === String(/\.scss$/)) {
                rule.oneOf.forEach(one => {
                  one.use.forEach(use => {
                    if (use.loader === '/home/oneko/src/clientes-dev/node_modules/@quasar/app/lib/webpack/loader.quasar-scss-variables' ||
                      use.loader === '/home/oneko/src/clientes-dev/node_modules/@quasar/app/lib/webpack/loader.quasar-sass-variables') {
                      use.loader = '/home/oneko/src/clientes-dev/src/loader/'

    I think there is a better way, so any help to improve this will be welcomed. It could be a good Quasar feature, couldn’t be?

  • @oneko

    What do you mean with each client ?
    Client as in you have a different apps? Or are you talking about users(clients) in a single app?

Log in to reply