掌握scss风格中Quasar变量的使用

Question

我通过 vue add quasar 配置了一个 Vue3 + Quasar 项目。我无法理解如何使用 quasar sass/scss 变量。

来自我预计使用的文档

<style lang="scss">
div {
  color: $red-1;
  background-color: $grey-5;
}
</style>

但由于 $red-1，它会导致 未定义的变量. 错误。如果我显式导入样式文件，我就可以使用那里的变量，例如 $primary，但无法使用其他 Quasar 变量。

<style lang="scss">
@import './styles/quasar.variables.scss';

div {
  color: $primary;
}
</style>

我是否也应该从 Quasar sass/scss 显式导入所有变量？

我的项目配置如下：

import { createApp } from 'vue'
import App from './App.vue'

import './assets/main.css'
import { Quasar } from 'quasar'
import quasarUserOptions from './quasar-user-options'

const app = createApp(App)
app.use(Quasar, quasarUserOptions)
app.mount('#app')

---

附带问题：当使用 Quasar 的 css 类时，bg-primary 和 bg-secondary 使用 Quasar 定义的主要和次要颜色而不是我的样式选择。这是预期的行为吗？

Answer 1

Sass/SCSS 变量仅适用于 quasar-cli 托管应用。

https://quasar.dev/style/sass-scss-variables