Why donate
API Explorer
Upgrade guide
NEW!
The quasar.config file
Convert project to CLI with Vite
Browser Compatibility
Supporting TypeScript
Directory Structure
Commands List
CSS Preprocessors
Routing
Lazy Loading - Code Splitting
Handling Assets
Boot Files
Prefetch Feature
API Proxying
Handling Vite
Handling process.env
State Management with Pinia
State Management with Vuex
Linter
Testing & Auditing
Developing Mobile Apps
Ajax Requests
Opening Dev Server To Public
Quasar CLI with Vite - @quasar/app-vite
CSS Preprocessors

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:

/quasar.config file

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.