How do I load pico css from node_modules in a svelte-kit app?

Question

Installed with $ npm install @picocss/pico -D

in rollup.config.js:

import css from "rollup-plugin-css-only";


...
    plugins: [
        css({ output: "static/bundle.css" }),
    ],

In ./routes/__layout.svelte I have:

<script>
    import "../../node_modules/@picocss/pico/css/pico.min.css";

</script>

Just get error in UI, and no css /bundle.css exists.

Metaphrase

Answer 1

I was just working with it today. I tried this:

<script>
  import "@picocss/pico/css/pico.min.css";
</script>

I didn't get any errors with it, but didn't try anything beyond that.

In my case, I import from the CDN in the original HTML and it worked fine.

Estancia

Answer 2

I just imported like this in +page.svelte:

<script>
    import '@picocss/pico'
</script>

You can see the linked code in action here: https://m.leftium.com/

I haven't tried importing from +layout.svelte, but I think that would work, too.

---

There is a Github issue comment that explains how to integrate Pico CSS with SvelteKit even more thoroughly:

Pico depends on main, footer, header being direct children of body for certain layouts, but that's not possible with sveltekit if you are doing it right.

However, pico has a $semantic-root-element variable that you can set as this element: <div style="display: contents">%sveltekit.body%</div>. So far this has fixed that for me but I haven't tried everything.

I did it like this.

<!-- app.html -->
<div id="pico-root" style="display: contents">%sveltekit.body%</div>

// variables.scss
$semantic-root-element: "div#pico-root"

// OR whever you import pico
$semantic-root-element: "div#pico-root"
@import '@picocss/pico/scss/pico';

Parol