Quasar框架编译项目时出现SassError文件已被加载错误如何解决？

报错根因 #

• Quasar 框架默认会自动将quasar.variables.scss文件内的变量全局注入到所有样式文件上下文，不需要手动@import引入，手动引入会触发 Sass 的重复加载校验规则，直接抛出该报错。
• 额外场景：你在quasar.config.js的sassVariables配置项已经声明了该变量文件路径，同时又在全局样式入口、组件样式内手动引入了该文件，也会触发重复加载冲突。
• 少数场景：项目配置了多套 Sass 全局注入规则，不同规则都重复加载了同一份 Quasar 变量文件。

可行解决方案 #

• 第一步：删除所有手动编写的@import '~src/css/quasar.variables.scss'语句，Quasar 自动注入的变量在所有 scss/sass 文件里都可以直接调用，不需要额外引入。
• 第二步：检查quasar.config.js配置，确认sassVariables字段仅配置一次，正确示例如下：

// quasar.config.js 配置参考
module.exports = configure(function () {
  return {
    // 其余配置省略
    build: {
      sassVariables: 'src/css/quasar.variables.scss'
    }
  }
})

• 第三步：如果上述操作后仍报错，大概率是 sass-loader 版本兼容问题，可执行对应命令降级到稳定兼容版本或者升级到最新版：
  降级命令：npm i sass-loader@10.1.1 -D
  升级命令：npm i sass-loader@latest -D
• 第四步：删除项目下的node_modules文件夹、package-lock.json或者yarn.lock文件，重新执行依赖安装命令后再编译即可。

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