Sass or SCSS (recommending any of the two flavours) and Stylus are the out of the box supported css preprocessors through Quasar CLI, should you want to use them.

You won’t need to install any additional packages or extend the Webpack configuration.

How to

Your Vue files can contain Sass/SCSS/Stylus code through the <style> tag.

<!-- Notice lang="sass" -->
<style lang="sass">
div
  color: #444
  background-color: #dadada
</style>

<!-- Notice lang="scss" -->
<style lang="scss">
div {
  color: #444;
  background-color: #dadada;
}
</style>

<!-- Notice lang="stylus" -->
<style lang="stylus">
div
  color #444
  background-color #dadada
</style>

And, of course, standard CSS is also supported:

<style>
div {
  color: #444;
  background-color: #dadada;
}
</style>

Variables

Quasar also supplies variables ($primary, $grey-3, …and many more) and you can directly use them. Read more about Sass/SCSS variables and Stylus variables.