Kuasai penggunaan pembolehubah Quasar dalam gaya scss

Question

Saya mengkonfigurasi projek Vue3 + Quasar melalui vue add quasar. Saya tidak faham cara menggunakan pembolehubah quasar sass/scss.

Daripada dokumentasi yang saya jangka akan gunakan

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

Tetapi pembolehubah Quasar lain tidak boleh digunakan kerana $red-1，它会导致 未定义的变量. 错误。如果我显式导入样式文件，我就可以使用那里的变量，例如 $primary.

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

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

Perlukah saya mengimport secara eksplisit semua pembolehubah daripada Quasar sass/scss juga?

Konfigurasi projek saya adalah seperti berikut:

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

---

Soalan sampingan: Apabila menggunakan kelas css Quasar, bg-primary 和 bg-secondary warna primer dan sekunder yang ditakrifkan oleh Quasar digunakan dan bukannya pilihan gaya saya. Adakah ini tingkah laku yang diharapkan?

Answer 1

Pembolehubah Sass/SCSS hanya berfungsi dalam quasar-cli apl yang dihoskan.

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