e111077 / vite-lit-element-ts-sass

Vite + Lit + TS + SASS = Super easy!

Vite Lit TS Minified Templates

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.