Removing <style lang="scss">...</style> while `nuxt dev` causes error

[some-user123]

Environment

---

• Operating System: Linux
• Node Version: v16.14.2
• Nuxt Version: 3.0.0-rc.10
• Nitro Version: 0.5.4
• Package Manager: [email protected]
• Builder: vite
• User Config: -
• Runtime Modules: -
• Build Modules: -

---

Reproduction

https://stackblitz.com/edit/nuxt-starter-bqwhz6?file=app.vue

Describe the bug

While nuxt dev is running, remove the whole section <script lang="scss">...</script> from app.vue and reload page.

 ERROR  9:53:15 PM [vite] Internal server error: [sass] expected "{".                            21:53:15
  ╷
5 │ </template>
  │            ^
  ╵
  app.vue 5:12  root stylesheet
  Plugin: vite:css
  File: /home/projects/nuxt-starter-bqwhz6/app.vue
  Error: expected "{".
    ╷
  5 │ </template>
    │            ^
    ╵
    app.vue 5:12  root stylesheet
      at Object.wrapException (/home/projects/nuxt-starter-bqwhz6/node_modules/sass/sass.dart.js:1247:17)

Additional context

No response

Logs

No response

[aesyondu]

Hmm I don't get it, I removed the style lang="scss" but it works fine:

[some-user123]

Did you remove it while nuxt dev was running?

[aesyondu]

Ah I see, when I remove the style and immediately click the circular reload icon it shows the error.

I can replicate locally as well with RC11:

1. Remove style lang="scss"
2. Save file
3. Immediately reload google chrome
4. See error
5. Keep reloading page
6. Still see error

Workaround is to close and rerun the npm run dev

[danielroe]

This seems like it might be a vite error. Would you test with https://stackblitz.com/github/nuxt-contrib/vue3-ssr-starter/tree/main?

[aesyondu]

This seems like it might be a vite error. Would you test with https://stackblitz.com/github/nuxt-contrib/vue3-ssr-starter/tree/main?

https://stackblitz.com/edit/github-innzae?file=src%2FApp.vue

Unable to reproduce. I added npm i -D sass and replaced the style with lang="scss".

[danielroe]

Thanks for checking.