Beherrschen Sie die Verwendung von Quasar-Variablen im SCSS-Stil
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?
