配置Vuetify Sass变量时报SassError: Expected identifier错误如何解决

错误1：Vuetify样式编译报错Expected identifier #

根因是你在src/styles/variables.scss中自定义Vuetify颜色变量的格式错误，导致Vuetify生成样式时将色值非法写入了类名中。
修复方案：

• 打开src/styles/variables.scss，检查$colors变量的Sass map配置，必须遵循「键为颜色名称、值为色值」的格式，示例正确配置：

// 正确示例
$colors: (
  'orange': #f77925,
  'primary': #1976d2,
  // 其他自定义颜色
);

• 不要把色值写到map的键位，不要漏写引号或者键值写反。

错误2：Bulma样式编译报错Undefined variable $background #

根因是你的项目同时依赖了Buefy（基于Bulma实现）和Vuetify两个UI框架，你在App.scss中引入Bulma样式的顺序错误，没有提前注入Bulma要求的基础变量。
修复方案二选一：

• 如果你不需要同时使用两个UI框架，直接删除package.json中的buefy依赖，同时删除App.scss中所有Bulma相关的@import语句即可
• 如果你确实需要同时使用两个框架，调整App.scss顶部的引入顺序，先引入Bulma的基础变量文件：

// App.scss 顶部按顺序引入
@import '~bulma/sass/utilities/initial-variables';
@import '~bulma/sass/utilities/functions';
// 再引入其他自定义样式或Bulma模块

附加配置检查 #

确认你的vue.config.js中正确配置了sass-loader注入自定义变量，适配Vuetify的变量覆盖规则：

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      scss: {
        additionalData: `@import "~@/styles/variables.scss";`
      }
    }
  },
  transpileDependencies: ['vuetify']
}

你当前安装的sass@1.32.8、sass-loader@10.1.1版本完全兼容Vuetify 2.4.11，无需调整版本。

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