Please provide a project template for vite
chenxin9482 opened this issue · 1 comments
chenxin9482 commented
My project use vite so that I choose rollup-plugin-lit-css。
this is my vite.config.js
import { defineConfig } from "vite";
import litcss from "rollup-plugin-lit-css";
export default defineConfig({
plugins: [
litcss({
include: "/src/components/**/*.css",
uglify: true,
}),
],
build: {
lib: {
entry: "src/my-element.js",
formats: ["es"],
},
rollupOptions: {
external: /^lit/,
},
},
});
and this is my element code
import { LitElement, css, html } from "lit";
import style from "./index.css";
export class HelloWorld extends LitElement {
constructor() {
super();
}
render() {
return html` <div>Hello World</div> `;
}
static styles = [style];
}
window.customElements.define("hello-world", HelloWorld);
but vite echo Default and named imports from CSS files are deprecated. Use the ?inline query instead. For example: import style from "./index.css?inline
so the import code transform
import style from "./index.css?inline";
but lit echo Failed to set the 'adoptedStyleSheets' property on 'ShadowRoot': Failed to convert value to 'CSSStyleSheet'.
so can you provide a project template for vite?
tks
bennypowers commented
Not super interested in supporting vite. Have you tried web dev server?