Nuxt3项目SCSS内部报错求助：保存或新增文件时出错

问题详情 #

• 保存文件后终端弹出内部服务错误，但应用仍能正常运行、网页无报错，错误信息如下：

ERROR Internal server error: [sass] expected "{". 11:50:07
╷
9 │
│ ^
╵
pages\index.vue 9:10 root stylesheet
Plugin: vite:css
File: F:\Projekty\BearDash\Website\pages\index.vue:9:10

• 在SCSS文件夹新增文件并通过@use导入到main.scss时，会触发相同错误，且错误会显示在网页上，必须重启yarn dev才能恢复。

相关配置文件 #

package.json #

"devDependencies": {
    "@nuxtjs/i18n": "^8.0.0-beta.10",
    "nuxt": "^3.3.3",
    "sass": "^1.62.0"
  },
  "dependencies": {
    "yarn": "^1.22.19"
  }

nuxt.config.js #

export default defineNuxtConfig({
  css: [
    "~/assets/scss/main.scss",
  ],
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@use "@/assets/scss/_variables.scss" as *;'
        }
      }
    }
  }
})

解决方法 #

1. 检查Vue组件的样式标签格式
   错误提示指向</script>标签，说明Sass编译器误将Vue组件中的非样式代码当成SCSS解析。先确认pages/index.vue的<style>标签是否正确声明了lang="scss"，同时检查标签内的SCSS代码是否有语法错误（比如未闭合的大括号、错误嵌套）：

<style lang="scss" scoped>
// 正确书写SCSS代码，确保大括号闭合、嵌套逻辑正确
</style>

2. 修正additionalData的路径配置
   Nuxt3中@默认指向src/目录，若你的项目没有src结构，改用~/路径更稳妥，同时确保_variables.scss文件本身无语法问题：

export default defineNuxtConfig({
  css: [
    "~/assets/scss/main.scss",
  ],
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@use "~/assets/scss/_variables.scss" as *;'
        }
      }
    }
  }
})

3. 处理新增SCSS文件的缓存问题
   Vite开发服务器对新增文件的缓存处理可能异常，可通过以下方式解决：

• 在nuxt.config.js中添加监听配置，确保SCSS目录的文件变更能被正确捕获：

export default defineNuxtConfig({
  vite: {
    server: {
      watch: {
        ignored: ["!**/assets/scss/**"]
      }
    }
  }
})

• 新增文件后若仍报错，手动删除.nuxt和.vite目录，再重启yarn dev。

4. 升级依赖版本
   当前使用的Nuxt3（3.3.3）和Sass（1.62.0）存在已知兼容性问题，建议升级到稳定版：

yarn upgrade nuxt@latest sass@latest

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