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.
WARNING
For full Sass/SCSS support, you will need @quasar/app v1.1+
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.