Master the use of Quasar variables in scss style-PHP Chinese Network Q&A

div{color:$red-1;background-color:$grey-5;} but it results in an undefined variable due to $red-1 .mistake. If I import the style file explicitly, I just"> Master the use of Quasar variables in scss style-PHP Chinese Network Q&A

Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

Master the use of Quasar variables in scss style

P粉071602406 2023-11-04 21:05:29

648

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

From the documentation I expected to use

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

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-primaryandbg-secondaryuse Quasar's defined primary and secondary colors instead of my style choices. Is this expected behavior?