I recently set up a project using Vue3 and Quasar by running vue add quasar. However, I am struggling to figure out how to utilize Quasar sass/scss variables.
According to the documentation, I should use the following syntax:
<style lang="scss">
div {
color: $red-1;
background-color: $grey-5;
}
</style>
However, this results in an error stating Undefined variable. for $red-1. I can successfully use variables like $primary when I import the styling file explicitly, but accessing other Quasar variables seems to be tricky.
<style lang="scss">
@import './styles/quasar.variables.scss';
div {
color: $primary;
}
</style>
Do I need to manually import all Quasar sass/scss variables as well?
The structure of my project setup 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')
On another note, I noticed that when using css classes provided by Quasar, bg-primary and bg-secondary apply Quasar's predefined primary and secondary colors instead of my customized ones. Is this the expected behavior?