Vite + Lit + Shoelace ? #2377
Unanswered
escvel-dot
asked this question in
Help
Vite + Lit + Shoelace ?
#2377
Replies: 2 comments
-
|
Did you get this working? It's been an absolute nightmare for me. Sometimes it works, sometimes it doesn't. Docs mix the used of CDN and Bundler instructions. It's absolutely maddening. |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
My <!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport"
content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="src/css/app.css">
<link rel="stylesheet" href="/node_modules/@shoelace-style/shoelace/cdn/themes/light.css" />
<link rel="stylesheet" href="/node_modules/@shoelace-style/shoelace/cdn/themes/dark.css" />
<title>my app</title>
<script type="module" src="/node_modules/@shoelace-style/shoelace/dist/components/button/button.js"></script>
<script type="module">
import { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path.js';
setBasePath('/');
</script>
</head>
<body>
</body>
</html>The following import path from 'path';
import copy from 'rollup-plugin-copy';
import { defineConfig } from 'vite';
const icons = [
'hourglass-split'
];
export default defineConfig({
plugins: [
copy({
targets: [
{
src: icons.map(icon => `node_modules/@shoelace-style/shoelace/dist/assets/icons/${icon}.svg`),
dest: 'public/assets/icons/'
}
],
hook: 'buildStart'
})
],
worker: {
format: "es"
},
resolve: {
alias: {
src: path.resolve('src/'),
}
},
}) |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Hi, I'm creating an app via vite create (scaffolding) using Lit. How should I go about including shoelace properly?
I made a basic empty Lit app component, and I wanna add shoelace components to it. I npm installed shoelace and added the rollup config from the docs. Then I imported sl-button in this lit app component, and added it to the render template. However it does not render properly on the page, it says click me, but seems like css and js are missing. I'm doing something wrong? Ideally I would wanna make this work locally, no cdn, using npm and vite. Any help or guidance would be welcome.
Beta Was this translation helpful? Give feedback.
All reactions