如何在脚本中访问Quasar的CSS变量？（Quasar 2.17.7）

Sass变量属于编译时变量，无法直接在JS中读取，需要通过以下方式暴露后才能访问：

方法1：通过Sass的:export导出到JS #

在quasar.variables.scss中添加导出代码，将需要的变量映射为JS可识别的键名：

$company-base: #3c3c3b;
$company-accent: #89c3ce;

$primary: #1976d2;
$secondary: #26a69a;
$accent: #9c27b0;

// 导出变量供JS读取
:export {
  companyBase: $company-base;
  companyAccent: $company-accent;
  primary: $primary;
  secondary: $secondary;
  accent: $accent;
}

在需要使用的script文件中导入该样式文件，直接读取变量：

import variables from 'src/css/quasar.variables.scss'

// 获取自定义变量
const accentColor = variables.companyAccent
// 获取内置主题变量
const primaryColor = variables.primary

注意：路径需根据项目中quasar.variables.scss的实际位置调整，比如文件在src/styles下时，路径改为src/styles/quasar.variables.scss。

方法2：转成CSS自定义属性（全局变量）读取 #

将Sass变量定义为CSS根变量，再通过JS读取全局样式：
在quasar.variables.scss中添加：

:root {
  --company-base: #{$company-base};
  --company-accent: #{$company-accent};
  // 内置主题变量Quasar会自动转为--q-primary这类，也可手动定义
  --q-primary: #{$primary};
}

// 保留原有Sass变量
$company-base: #3c3c3b;
$company-accent: #89c3ce;
$primary: #1976d2;
$secondary: #26a69a;
$accent: #9c27b0;

在script中通过getComputedStyle获取变量：

const rootStyles = getComputedStyle(document.documentElement)
// 获取自定义变量
const accentColor = rootStyles.getPropertyValue('--company-accent').trim()
// 获取内置主题变量（Quasar自动生成）
const primaryColor = rootStyles.getPropertyValue('--q-primary').trim()

方法3：配置到Quasar品牌主题，用$q对象访问 #

如果想通过类似$q.getColour的方式访问，可把自定义变量配置到Quasar品牌主题中：
打开quasar.conf.js，在framework.config.brand中添加自定义变量：

module.exports = function (ctx) {
  return {
    // 其他配置项...
    framework: {
      config: {
        brand: {
          // 自定义变量
          companyBase: '#3c3c3b',
          companyAccent: '#89c3ce',
          // 覆盖默认主题变量
          primary: '#1976d2',
          secondary: '#26a69a',
          accent: '#9c27b0'
        }
      }
    }
  }
}

之后在组件script中通过$q.config.brand访问：

// Options API写法
const accentColor = this.$q.config.brand.companyAccent
const primaryColor = this.$q.config.brand.primary

// <script setup>写法
import { useQuasar } from 'quasar'
const $q = useQuasar()
const accentColor = $q.config.brand.companyAccent

内容的提问来源于stack exchange，提问作者Rejesto