Vue3+Vuetify3+Vite栈Sass的@forward为首行仍报前置错误如何排查

• 优先级最高的诱因是Vite的CSS预处理器配置中的additionalData字段：该字段配置的内容会被自动注入到所有sass/scss文件的最开头，直接把你原本写在第一行的@forward规则挤到第二行，触发sass的语法约束（@forward必须是文件第一条规则）
• 其次是文件编码问题：如果你的sass文件保存为UTF-8带BOM格式，解析器会把开头的BOM不可见字符识别为第一行内容，导致你的代码首行被判定为第二行
• 第三种情况是vite-plugin-vuetify的样式自动注入逻辑冲突：插件默认会给样式文件注入Vuetify的变量前置代码，如果你同时配置了自定义样式入口，就会出现重复注入导致行号偏移

• 要查看sass文件被构建工具处理后的完整内容，可以在vite.config.ts中添加临时调试插件，拦截并打印处理后的文件内容：

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vuetify from 'vite-plugin-vuetify'

export default defineConfig({
  plugins: [
    // 临时调试插件，注意放在其他处理样式的插件之前
    {
      name: 'debug-sass-content',
      transform(code, id) {
        // 替换为你自己的sass文件路径，或者是报错的vuetify样式文件路径
        if (id.includes('styles/main.sass')) {
          console.log('=== 文件路径：', id)
          console.log('=== 处理后完整内容：\n', code)
          console.log('=== 行号拆分：', code.split('\n').map((line, idx) => `${idx+1}: ${line}`))
        }
      }
    },
    vue(),
    vuetify({/* 你的vuetify插件配置 */})
  ]
})

启动项目后查看终端输出，就能明确看到首行是否被插入了额外内容。

• 排查文件本身问题：用编辑器开启「显示所有不可见字符」功能，查看文件开头是否有BOM头、多余的换行或空白字符。

• 确认是additionalData注入导致的：把你配置的全局注入代码（比如全局变量、mixin引入）调整为通过@use在样式文件中显式引入，或者修改additionalData的匹配规则，排除包含@forward的入口样式文件。
• 确认是BOM头导致的：用编辑器将文件编码改为「UTF-8 无BOM」后重新保存即可。
• 确认是vuetify插件冲突导致的：如果你自定义了全局样式入口，将vite-plugin-vuetify的styles配置项设为false，手动在你的样式入口中引入Vuetify的基础样式。

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