shaal / vite-lit-element-ts-sass

Vite + Lit + TS + SASS = Super easy!

Vite Lit Element TS SASS

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

Changes from Vite's TS Lit template

• Changed Lit 1 implementation to Lit 2
• Added the rollup-plugin-postcss-lit plugin to vite.config.ts
• npm i -D sass
• Added typings/scss.d.ts
• Moved styles from src/my-element.ts to src/my-element.scss and imported them
• Added the typings folder to tsconfig.json
• Added "skipLibCheck": true to tsconfig.json to override Vite's .scss file typings

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