Sass and vite are trying to incorrectly parse javascript in my vue application

I have a vue3/vite app that I have developed and deployed to my domain. Upon deploying and opening the page for the first time I am greeted with this error, after which upon refreshing it goes away:

    [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

Is there any possible reason for this to occur? It seems that it is initially trying to parse my javascript import statement through sass and i'm not sure why. Would love to get some insight into how this could be possible, and would adjusting my vite.config somehow assist to stop this from happening again?

here is my vite.config.js, which is close to the standard starter template, I have only ever added the css preprocessorOptions which just loads a stylesheet for each component in my vue app. It seems unrelated to the error:

    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"; 
          }
        }
      }
    })