I am using something like this to import styles from a sass file into a lit component:

import { html, unsafeCSS, LitElement } from "lit";
import local_css from "/src/static/component_styles.sass";

export class MyApp extends LitElement{
  static styles = unsafeCSS(local_css);
} 

The styles are correctly injected into the js code when building the app but the component_styles.sass is additionally bundled into a styles.css.

And what's worse, the styles from component_styles.sass are loaded as global styles by the development server. So the local component's styles affect the DOM around the component in development. That defeats the purpose of component development.

Is there a way to avoid that? There is a discussion (but so far not a solution) about this here on vite's github