如何在SCSS样式中正确使用Quasar变量？

1. 如何使用Quasar的Sass/SCSS内置变量 #

不需要手动导入所有Quasar变量，问题出在项目未全局注入Quasar的内置变量，按以下方式处理：

全局配置推荐方案（Vite项目） #

在项目根目录的vite.config.js中，配置Quasar插件的sassVariables选项，指向你的自定义变量文件：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { quasar, transformAssetUrls } from '@quasar/vite-plugin'

export default defineConfig({
  plugins: [
    vue({
      template: { transformAssetUrls }
    }),
    quasar({
      sassVariables: 'src/styles/quasar.variables.scss'
    })
  ]
})

配置完成后，所有组件的<style lang="scss">标签里可直接使用$red-1、$grey-5这类Quasar内置变量，同时也能正常使用你自定义的$primary等变量。

临时组件内导入方案 #

若不想全局配置，也可在需要使用内置变量的组件style标签顶部手动导入Quasar变量文件：

@import '~quasar/src/css/variables.sass';

div {
  color: $red-1;
  background-color: $grey-5;
}

2. bg-primary/bg-secondary使用默认色的问题 #

这不是预期行为，说明你的自定义变量未被Quasar正确加载应用，请检查以下几点：

• 确认quasar-user-options.js中已正确导入自定义变量文件：

  import './styles/quasar.variables.scss'
  
  export default {
    config: {},
    plugins: {}
  }
  

• 检查quasar.variables.scss中是否正确覆盖默认变量，示例：

  $primary: #你的自定义颜色值;
  $secondary: #你的自定义颜色值;
  

• 确保构建配置（如vite.config.js）中已正确配置Quasar的sass变量注入，参考第一个问题的全局配置方案。

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