svelte-scoped-uno
v0.1.4
Published
Use UnoCSS utility styles in a modular fashion in Svelte, with styles being stored only where needed.
Downloads
26
Maintainers
Readme
svelte-scoped-uno
Setup
Install package
npm i -D svelte-scoped-uno
All exports from unocss
are reexported from svelte-scoped-uno
so there's no need to install unocss
. This will avoid any breaking changes from unocss affecting your project.
Add the Vite Plugin:
// vite.config.ts
import { defineConfig } from 'vite'
import { sveltekit } from '@sveltejs/kit/vite'
+import { SvelteScopedUno } from 'svelte-scoped-uno'
export default defineConfig({
plugins: [
+ SvelteScopedUno(),
sveltekit(),
],
})
Add UnoCSS config
// unocss.config.ts
import { defineConfig, presetUno } from 'svelte-scoped-uno'
export default defineConfig({
presets: [
presetUno(),
],
})
Global styles
Add the global styles placeholder, %svelte-scoped-uno.global%
, in the <head>
of your root html file:
- if you are simply using Vite + Svelte (not SvelteKit) placing it in the
<head>
after resets is sufficient. - If you are using SvelteKit then make sure to place it after any style resets but before
%sveltekit.head%
. Also add the following code to yourhooks.server.js
orhooks.server.ts
:
/** @type {import('@sveltejs/kit').Handle} */
export async function handle({ event, resolve }) {
const response = await resolve(event, {
+ transformPageChunk: ({ html }) => html.replace('%svelte-scoped-uno.global%', 'svelte_scoped_uno_global_styles'),
})
return response
}
We do this because importing styles at the top of your root
+layout.svelte
file will not give you any control over whether your global styles are loaded before or after component styles (and the order may flip between dev and prod), any styles you want utility classes to be able to override (resets, preflights, safelist, typography, etc...) must be placed in the head ofapp.html
file before%sveltekit.head%
.