[How To] Import Stylus variables depending on the current theme

[a47ae]

Recently @benoitranque asked on Gitter how to import not the quasar.variables.styl file in a component (which is easy, just write @import '~variables' ), but the app.<THEME>.styl variables.

After tinkering a bit with the webpack alias config I finally figured it out.
You have to replace the existing variables alias with the following line: variables: path.resolve(__dirname, '../src/themes/app.' + env.platform.theme + '.styl'). But because the alias are all configured in config/index.js and somehow there is an issue with reading the env variable in this file (would be glad if someone can point out why), you need take the alias definitions and write them directly in the build/webpack.base.conf.js file.

The last thing to notice is that if you import that file, as far as I know, you also copy all the Quasar styles into your component again, really bloating up the styles. So you would propably be better of by creating two new files mat.variables.styl and ios.variables.stly which you import in the corresponding app.<THEME>.styl files right before Quasar is imported and then change the alias definition to variables: path.resolve(__dirname, '../src/themes/' + env.platform.theme + 'variables.styl')