novacbn
commented
3 years ago Quickly made a new template based on the template you used, which you can find at kahi-framework/kahi-ui-template-svelte. You should be able to just use degit but pointing to that repo. e.g. npx degit kahi-framework/kahi-ui-template-svelte my-svelte-project (probably, never used degit before)
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 main.js with Kahi UI stylesheet import
+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 App.svelte to use Kahi UI Components and removed template styles
<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 global.css reference and file
<!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.
Thom087
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
Do I miss some configuration? Could you improve the docs how to get started?
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:Additional Context
No response