CSS 预处理器

Quasar CLI 中提供了开箱即用的 Sass 或 SCSS 支持。

配置

您可以通过 /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 变量。