Please follow these instructions carefully.

• Svelte
• Sapper - (scroll down)

Svelte

Note: The instructions below assume you have an existing Svelte project or you're starting a new project using

npx degit sveltejs/template my-svelte-project

and that you've already added Svelteit like so:

npm install -D @colorfuldots/svelteit

# or if you prefer yarn

yarn add @colorfuldots/svelteit --dev

Svelteit Configuration with Svelte

1. Install a PostCSS loader of choice. We recommend rollup-plugin-postcss

yarn add rollup-plugin-postcss --dev

2. Open rollup.config.js in your project and import the rollup-plugin-postcss module to the top of the file like so:

import postcss from 'rollup-plugin-postcss'

3. Add this config to your rollup.config.js plugins: [ ] like so:

postcss({
    plugins: [],
}),

4. Rebuild and restart your project:

yarn build && yarn dev

5. Import Svelteit CSS anywhere you'd like to use it. You should only have to do this once in your app's entry point. i.e. App.svelte

<script>
  import '@colorfuldots/svelteit/dist/css/svelteit.min.css'
</script>

Optional: you can alternatively import the css file using Svelte's built in components like so:

<svelte:head>
  <link rel="stylesheet" href="./path/to/library/svelteit.min.css" />
</svelte:head>

6. Add your components of choice like so:

<script>
  import { Button } from '@colorfuldots/svelteit'
</script>

<div>
  <Button title="Hello Svelteit" primary rounded />
</div>

That's It! Now you're ready to "Svelteit"!

Svelteit Configuration with Sapper

Note: The instructions below assume you have an existing Sapper project or you're starting a new project using

npx degit "sveltejs/sapper-template#rollup" my-app

npm install -D @colorfuldots/svelteit

# or if you prefer yarn

yarn add @colorfuldots/svelteit --dev

1. Import Svelteit CSS anywhere you'd like to use it. You should only have to do this once in your app's entry point. i.e. App.svelte

<script>
  import '@colorfuldots/svelteit/dist/css/svelteit.min.css'
</script>

Optional: you can alternatively import the css file using Svelte's built in components like so:

<svelte:head>
  <link rel="stylesheet" href="./path/to/library/svelteit.min.css" />
</svelte:head>

2. Add your components of choice like so:

<script>
  import { Button } from '@colorfuldots/svelteit'
</script>

<div>
  <Button title="Hello Svelteit" primary rounded />
</div>

That's It! Now you're ready to "Svelteit"!