Vue3/Vite应用部署后首次加载Sass误解析JS报错求助

开发了一个Vue3/Vite应用并部署到自有域名，首次打开页面出现如下错误，刷新后错误消失：

[plugin:vite:css] [sass] expected "{".

|
|    import { reactive, unMounted, watch } from 'vue'
|                                        ^

src/components/myComponent.vue 7:39 root stylesheet


at Object.wrapException (app_vue/node_modules/sass/sass.dart.js:1252:43)
at SpanScanner.error$3$1ength$position (app_vue/node_modules/sass/sass.dart.js:76246:15)
at SpanScanner._fail$1 (app_vue/node_modules/sass/sass.dart.js:76371:12)
at SpanScanner.expectChar$2$name (app_vue/node_modules/sass/sass.dart.js:76327:12)
at SpanScanner.expectChar$1 (app_vue/node_modules/sass/sass.dart.js:76330:19)
at ScssParser0.children$1 (app_vue/node_modules/sass/sass.dart.js:103412:10)
at ScssParser0._stylesheet0$_withChildren$1$3 (app_vue/node_modules/sass/sass.dart.js:110264:39)
at ScssParser0._stylesheet0$_withChildren$3 (app_vue/node_modules/sass/sass.dart.js:110269:19)
at ScssParser0._stylesheet0$_styleRule$2 (app_vue/node_modules/sass/sass.dart.js:107176:20)
at ScssParser0._stylesheet0$_declarationOrStyleRule$0 (app_vue/node_modules/sass/sass.dart.js:107050:87)

错误显示Sass尝试解析JavaScript导入语句，不清楚问题诱因，希望了解原因以及能否通过调整vite.config.js避免该问题。以下是我的vite.config.js配置（仅添加了CSS预处理器选项）：

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  define: {
    'process.env': process.env
  },
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
          @import "@/assets/stylesheets/variables"; 
      }
    }
  }
})

核心诱因 #

1. additionalData语法错误：你的vite.config.js中scss.additionalData的字符串未正确闭合，且缺少必要的语法收尾，导致Sass预处理器注入全局样式时出现语法混乱，进而错误地将Vue组件内的JS导入语句识别为CSS内容解析。
2. 首次加载顺序异常：页面首次加载时，Vite的预构建或资源加载顺序出现偏差，加剧了语法错误引发的解析混乱；刷新后加载逻辑恢复正常，错误暂时消失。

修复方案 #

直接修正vite.config.js中scss.additionalData的语法问题：

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  define: {
    'process.env': process.env
  },
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        // 修正字符串闭合，确保Sass语法正确
        additionalData: `@import "@/assets/stylesheets/variables.scss";`
      }
    }
  }
})

额外注意事项：

• 确保导入的SCSS文件后缀完整（如.scss），避免路径解析歧义。
• additionalData的内容必须严格符合Sass语法，不要保留多余的无意义换行或未闭合的符号，防止干扰全局样式注入的正确性。

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