Skip to content

shaal/vite-lit-element-ts-sass

 
 

Repository files navigation

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.

About

Vite + Lit + TS + SASS = Super easy!

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 75.0%
  • CSS 13.4%
  • HTML 8.1%
  • JavaScript 2.5%
  • SCSS 1.0%