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.cjs 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 也提供變數 ($primary、$grey-3，…等等還有更多)，您可以直接使用它們。閱讀更多關於 Sass/SCSS 變數 的資訊。