Vite Lit TS Minified Templates

April 19, 2023 ยท View on GitHub

This is an example Vite project using Lit 2, Typescript, and Sass imports.

Changes from Vite's TS Lit template

  • npm i -D sass
  • Moved styles from src/my-element.ts to src/my-element.scss and imported them with import styles from './my-element.scss?inline';
  • Added typings for Sass files in typings/
  • Updated tsconfig.json to include typings/ directory
  • Updated vite.config.ts
    • Changed library build to follow WC best practices
    • Added a commented-out build for applications

N.B. Since Vite does does not yet handle Lit HMR, Vite triggers a full reload for Lit files, but SASS files currently only trigger a hot module reload which will not update Lit without manually triggering a reload. Follow this issue for more details or wait until Lit HMR is released.