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
Thanks to franktopel and tarnishablec in https://github.com/vitejs/vite/issues/3246 I got an answer: adding "?inline" to the import apparently keeps the styles local to the component. Works for both development and production.
import local_css from "/src/static/component_styles.sass?inline";