如果你想使用 Sass 或 SCSS（推荐使用其中任何一种）是通过 Quasar CLI 开箱即用的 CSS 预处理器。

¥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)

¥Configuration

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

¥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
  }
}

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

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

用法(Usage)

¥Usage

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

¥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>

当然，标准 CSS 也受支持：

¥And, of course, standard CSS is also supported:

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

变量(Variables)

¥Variables

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

¥Quasar also supplies variables ($primary, $grey-3, …and many more) and you can directly use them. Read more about Sass/SCSS variables.