Beherrschen Sie die Verwendung von Quasar-Variablen im SCSS-Stil

Question

Ich habe über vue add quasar ein Vue3 + Quasar-Projekt konfiguriert. Ich verstehe nicht, wie man Quasar-Sass/SCSS-Variablen verwendet.

Aus der Dokumentation, die ich voraussichtlich verwenden würde

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

Aber andere Quasar-Variablen können aufgrund von $red-1，它会导致 未定义的变量. 错误。如果我显式导入样式文件，我就可以使用那里的变量，例如 $primary nicht verwendet werden.

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

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

Soll ich alle Variablen auch explizit aus Quasar sass/scss importieren?

Meine Projektkonfiguration ist wie folgt:

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

---

Nebenfrage: Bei der Verwendung der CSS-Klassen von Quasar bg-primary 和 bg-secondary werden die von Quasar definierten Primär- und Sekundärfarben anstelle meiner Stilauswahl verwendet. Ist das erwartetes Verhalten?

Answer 1

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

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