Maîtriser l'utilisation des variables Quasar dans le style scss

Question

J'ai configuré un projet Vue3 + Quasar via vue add quasar. Je n'arrive pas à comprendre comment utiliser les variables quasar sass/scss.

D'après la documentation que je m'attendais à utiliser

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

Mais d'autres variables Quasar ne peuvent pas être utilisées à cause de $red-1，它会导致 未定义的变量. 错误。如果我显式导入样式文件，我就可以使用那里的变量，例如 $primary.

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

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

Dois-je également importer explicitement toutes les variables de Quasar sass/scss ?

La configuration de mon projet est la suivante :

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

---

Question secondaire : lors de l'utilisation des classes CSS de Quasar, bg-primary 和 bg-secondary les couleurs primaires et secondaires définies par Quasar sont utilisées à la place de mes choix de style. Est-ce un comportement attendu ?

Answer 1

Les variables

Sass/SCSS ne sont disponibles que dans les applications hébergées quasar-cli.

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