如果想使用Sass或SCSS（推荐这两种中的任何一种），它们是通过Quasar CLI开箱即用的css预处理器。

配置

你可以通过/postcss.config.js和扩展Vite配置来配置如何处理你的CSS：

// quasar.config.js

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

更多信息: css.modules, css.postcss, css.preprocessorOptions.

用法

您的Vue文件可以通过<style>标签包含Sass/SCSS代码。

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

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

而且，当然，还支持标准CSS：

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

变量

Quasar还提供变量（$primary, $grey-3等），您可以直接使用它们。 阅读有关Sass/SCSS变量的更多信息。