How to add Kahi-ui to a blank svelte template page #45
Comments
|
Quickly made a new template based on the template you used, which you can find at To reproduce your issue and make the template. I just followed the instructions outlined in the Getting Started section of the documentation. And made some changes specific to the template: Installed library via npm npm install @kahi-ui/frameworkUpdated +import "@kahi-ui/framework/dist/kahi-ui.framework.css";
import App from './App.svelte';
const app = new App({
target: document.body,
props: {
name: 'world'
}
});
export default app;Changed <script>
+ import {Anchor, Container, Heading, Text} from "@kahi-ui/framework";
export let name;
</script>
+<Container is="main">
+ <Heading>Hello {name}!</Heading>
+ <Text>Visit the <Anchor href="https://svelte.dev/tutorial">Svelte tutorial</Anchor> to learn how to build Svelte apps.</Text>
+</Container>
-<main>
- <h1>Hello {name}!</h1>
- <p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
-</main>
-
-<style>
- main {
- text-align: center;
- padding: 1em;
- max-width: 240px;
- margin: 0 auto;
- }
-
- h1 {
- color: #ff3e00;
- text-transform: uppercase;
- font-size: 4em;
- font-weight: 100;
- }
-
- @media (min-width: 640px) {
- main {
- max-width: none;
- }
- }
-</style>Removed <!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1'>
<title>Svelte app</title>
<link rel='icon' type='image/png' href='/favicon.png'>
- <link rel='stylesheet' href='/global.css'>
<link rel='stylesheet' href='/build/bundle.css'>
<script defer src='/build/bundle.js'></script>
</head>
<body>
</body>
</html>Which should result in the following output:
Let me know if the steps above helps you figure out your situation. Also, since most of the steps above are specific to the template, I'm not sure any updating is required for the documentation. |
|
Awesome, thanks a lot! I think it is fine that you mentioned it at Resources -> Official -> Templates on the documentation page.
|
|
I tried to replicate your issue on my systems and couldn't. Looking into it, it could relate to multiple problems as described in Rich-Harris/degit#37. For instance, I was able to replicate it when I removed |
|
It works after updating Git from version 2.13.0.windows.1 to the latest version 2.33.0.windows.2. |
Describe the Request
I am pretty new to svelte and Kahi-ui seems to be very nice. However I tried to add it into the demo project from
npx degit sveltejs/template my-svelte-projectmeans I adjusted the App.svelte with the import from '@kahi-ui/framework'. Everything is fine, despite that the css is not applied.Nevertheless the files are on the server:
Do I miss some configuration? Could you improve the docs how to get started?
Additional Context
No response
The text was updated successfully, but these errors were encountered: