Astro Lit integration breaks SCSS imports

[riccardolardi]

What version of astro are you using?

1.6.10

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

yarn

What operating system are you using?

Mac

Describe the Bug

Reproduction:

• yarn create astro
• yarn add -D sass
• create file /src/_index.scss, add <style lang="scss"> and @import '../_index.scss'; to /src/pages/index.astro
• yarn dev, visit localhost:3000, all fine
• yarn astro add lit
• yarn dev, visit localhost:3000, error: Sass: Can't find stylesheet to import.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-2hn57u?file=src/pages/index.astro

Participation

• I am willing to submit a pull request for this issue.

[bluwy]

This is quite similar to #5441 but I can confirm this bug happening before 1.6.3 too so maybe there's a different cause to it.

[riccardolardi]

@bluwy let me know if there's any way I can help. Would be glad to contribute!

[bluwy]

Thanks @riccardolardi. Currently I'm still debugging how Vite resolve things in SCSS and reporting my findings at #5441. So far scss's JS API is just weird 🥲

[bluwy]

Made a fix at vitejs/vite#11079. Was a pain to debug but it's over now 😄

[bluwy]

vitejs/vite#11079 has been merged. Closing this for now as the work has been done. I'll try to get this backported to Vite v3.