https://github.com/e111077/vite-lit-element-ts-sass

Vite + Lit + TS + SASS = Super easy!
https://github.com/e111077/vite-lit-element-ts-sass

lit lit-element lit-elements lit-html sass typescript vite

Last synced: 23 days ago
JSON representation

Vite + Lit + TS + SASS = Super easy!

• Host: GitHub
• URL: https://github.com/e111077/vite-lit-element-ts-sass
• Owner: e111077
• Created: 2021-05-03T07:42:38.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2023-04-19T22:45:53.000Z (over 1 year ago)
• Last Synced: 2024-10-05T07:41:10.673Z (about 1 month ago)
• Topics: lit, lit-element, lit-elements, lit-html, sass, typescript, vite
• Language: TypeScript
• Homepage:
• Size: 29.3 KB
• Stars: 73
• Watchers: 4
• Forks: 9
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-lit - Vite Lit Element TS SASS - Example Vite project using Lit 2, Typescript, and SASS. (Starter Templates)

README

        
# Vite Lit TS Minified Templates

This is an example [Vite](https://vitejs.dev/) project using [Lit 2](https://lit.dev), 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/`](https://github.com/e111077/vite-lit-element-ts-sass/blob/master/typings/scss.d.ts)

* Updated `tsconfig.json` to include `typings/` directory

* Updated `vite.config.ts`

  * Changed library build to follow [WC best practices](https://justinfagnani.com/2019/11/01/how-to-publish-web-components-to-npm/)

  * 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](https://github.com/vitejs/vite/issues/3243) for more details or wait until [Lit HMR](https://github.com/lit/lit-element/pull/802) is released.