如何在 scss 样式中正确使用 Quasar 变量答案

【问题标题】：How to correctly use Quasar variables in scss style如何在 scss 样式中正确使用 Quasar 变量
【发布时间】：2022-08-05 00:26:06
【问题描述】：

我已经通过vue add quasar 配置了一个 Vue3 + Quasar 项目。我不明白如何使用quasar sass/scss variables。

从我期望使用的文档中

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

但由于$red-1，它会导致Undefined variable. 错误。如果我显式导入样式文件，我可以从那里使用变量，例如$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\')

附带问题：当使用css classes from Quasar、bg-primary 和bg-secondary 时，请使用 Quasar 定义的主色和辅助色，而不是我的样式选择。这是预期的行为吗？

标签： css vue.js sass quasar-framework

【解决方案1】：

Sass/SCSS 变量仅适用于 quasar-cli 托管应用程序。

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

【讨论】：