Estoy usando algo como esto para importar estilos de un archivo sass a un componente iluminado:
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); }Los estilos se inyectan correctamente en el código js al compilar la aplicación, pero el componente_estilos.sass también se incluye en un archivo styles.css.
Y lo que es peor, el servidor de desarrollo carga los estilos de component_styles.sass como estilos globales. Entonces, los estilos del componente local afectan el DOM alrededor del componente en desarrollo. Eso anula el propósito del desarrollo de componentes.
¿Hay alguna manera de evitar eso? Hay una discusión (pero hasta ahora no es una solución) sobre esto aquí en el github de vite
Gracias a franktopel y tarnishablec en https://github.com/vitejs/vite/issues/3246 obtuve una respuesta: agregar "?inline" a la importación aparentemente mantiene los estilos locales para el componente. Funciona tanto para el desarrollo como para la producción.
import local_css from "/src/static/component_styles.sass?inline";