Master the use of Quasar variables in scss style

Question

I configured a Vue3 Quasar project through vue add quasar. I can't understand how to use quasar sass/scss variables.

From the documentation I expected to use

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

But due to $red-1, it will result in undefined variable. error. If I import the style file explicitly, I can use the variables there, such as $primary, but not the other Quasar variables.

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

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

Should I also explicitly import all variables from Quasar sass/scss?

My project configuration is as follows:

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

---

Side question: When using Quasar's css classes, bg-primary and bg-secondary use Quasar's defined primary and secondary colors instead of my style choices. Is this expected behavior?

Answer 1

Sass/SCSS variables are only available in quasar-cli hosted apps.

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