🐛 BUG: Importing a Lit component breaks .scss imports

[jon-loubert]

What version of astro are you using?

v1.0.0-beta.38 and astrojs/lit 0.1.4

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

None

What package manager are you using?

npm

What operating system are you using?

Mac

Describe the Bug

Importing a local SCSS file (i.e. import '../test.scss';) in an Astro component fails (500 error) as soon as any Lit component is imported in the same .astro file.

I used the Astro.new "integrations playground" as a starting point for these:

• Working .scss import in index.astro: https://stackblitz.com/edit/github-pb8eis?file=src/pages/index.astro
• The same as above, but uncommented the Lit integration and uncommented one Lit import in index.astro: https://stackblitz.com/edit/github-pb8eis-xyyw8g?file=src/pages/index.astro

When I reproduce this issue locally, I can see in my server stack trace: error Preprocessor dependency "sass" failed to load: once I cause the error.

Link to Minimal Reproducible Example

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

Participation

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

[natemoo-re]

Thanks for opening an issue! This is a known problem with Lit that is being tracked upstream.

See lit/lit#2393 and the previous closed Astro issue #2623

[natemoo-re]

Actually, I'm going to reopen this to be closed by #3511