如何在quasar-variables.sass中覆盖Quasar默认颜色并解决样式导入报错？

1. 先排查quasar-variables.sass的核心语法问题 #

Quasar的quasar-variables.sass采用缩进式Sass语法（而非SCSS的大括号分号格式），这是新手踩坑重灾区：

• 导入自定义样式文件时，严格遵循Sass的@import写法，不能加花括号，同时要保证路径正确
• 示例正确写法：

  // 导入全局styles.css（路径根据实际文件层级调整）
  @import '../styles.css'
  
  // 覆盖Quasar基础颜色，用Sass变量格式（无分号、无大括号）
  $primary: #2196F3
  $secondary: #424242
  

  注意：如果styles.css里是CSS原生变量（如--primary: #xxx），不能直接在Sass变量里引用，要么转成Sass变量再使用，要么直接在Quasar变量中写色值。

2. 修正全局样式的加载逻辑 #

不要在App.vue里手动导入quasar-variables.sass，Quasar框架会自动加载该文件用于覆盖基础样式。全局样式styles.css直接在配置文件中全局引入即可：

// quasar.config.js
module.exports = function (ctx) {
  return {
    css: [
      'styles.css' // 全局加载该样式文件，覆盖所有组件样式
    ]
  }
}

这种方式既符合Quasar的设计逻辑，也能避免手动导入带来的语法冲突。

3. 定位Expected newline错误的具体原因 #

针对你仓库里的Frontend\src\quasar-variables.sass，重点检查以下几点：

• 所有变量定义是否严格使用缩进式语法（无大括号、无分号，靠缩进区分层级）
• @import语句是否放在文件最顶部，相对路径是否匹配实际文件位置
• 有没有把CSS语法（比如分号、大括号）混入到Sass缩进语法中——这是触发Expected newline错误的最常见原因

4. 验证修复效果 #

修改完成后，重启Quasar开发服务（quasar dev），观察错误是否消失。如果仍有问题，把quasar-variables.sass的完整代码贴出来，能更精准定位问题。

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