如何修改Quasar样式变量？Vite+Vue项目h1样式调整难题

问题原因 #

你在quasar-variables.sass中直接使用map-merge($h1, ...)无效，是因为此时Quasar默认的$h1变量还未被引入到当前样式作用域中，Sass无法找到原变量进行合并操作。直接复制完整$h1定义虽然可行，但冗余且不符合DRY原则。

方法1：正确使用Sass变量合并（符合Quasar规范） #

在quasar-variables.sass开头先导入Quasar的基础变量文件，再执行map-merge操作，确保原$h1变量可用：

// 导入Quasar核心变量，Vite会自动解析node_modules中的路径
@use 'quasar/src/css/variables.sass' as *

// 仅合并需要修改的属性，保留其他默认值
$h1: map-merge($h1, (
  size: 4rem,
  line-height: 4rem
))

这样既保留了Quasar默认的$h1其他属性（如字重、字母间距），又只修改了你需要的字号和行高。

方法2：使用CSS自定义属性（更简单灵活） #

Quasar的组件样式大量基于CSS自定义属性，你可以直接在全局样式中覆盖对应变量，无需处理Sass的导入和合并逻辑：
在项目的src/css/app.sass中添加：

:root
  --q-h1-size: 4rem
  --q-h1-line-height: 4rem

这种方式更轻量化，适合仅修改个别样式属性的场景，且不会影响Sass变量的原有逻辑。

补充说明 #

• 这不是Vite构建工具的问题，核心是Quasar变量的加载顺序和作用域问题。
• 不建议直接导入Quasar内部变量后再修改，除非你明确需要基于原变量进行合并，否则CSS自定义属性的方式更简洁。

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