掌握scss風格中Quasar變數的使用

Question

我透過 vue add quasar 設定了一個 Vue3 Quasar 專案。我無法理解如何使用 quasar sass/scss 變數。

來自我預計使用的文件

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

但由於 $red-1，它會導致 未定義的變數. 錯誤。如果我明確匯入樣式文件，我就可以使用那裡的變量，例如 $primary，但無法使用其他 Quasar 變數。

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

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

我是否也應該從 Quasar sass/scss 明確匯入所有變數？

我的專案配置如下：

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

---

附帶問題：當使用 Quasar 的 css 類別時，bg-primary 和 bg-secondary 使用 Quasar 定義的主要和次要顏色而不是我的樣式選擇。這是預期的行為嗎？

Answer 1

Sass/SCSS 變數僅適用於 quasar-cli 託管應用程式。

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