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

Configuration

You can configure how your CSS is handled through /postcss.config.js and through extending the Vite config:

build: {
  extendViteConf (viteConf, { isClient, isServer }) {
    viteConf.css.modules = ...
    viteConf.css.postcss = ...
    viteConf.css.preprocessorOptions
  }
}

More info: css.modules, css.postcss, css.preprocessorOptions.

Usage

Your Vue files can contain Sass/SCSS 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>

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.