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

2 min read 05-10-2024

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

Styling Your SvelteKit App with Pico.css: A Simple Guide

Building a modern web application often involves a blend of functionality and visual appeal. Pico.css, a minimalist CSS framework, offers a clean and straightforward approach to styling, making it a popular choice for developers.

But how do you integrate Pico.css into your SvelteKit project, particularly when it's installed within your node_modules directory? Let's dive in.

The Challenge: Linking Pico.css in SvelteKit

SvelteKit, a framework built on Svelte, offers a streamlined development experience. It comes with its own system for managing stylesheets, which can sometimes be a bit tricky when you're using external libraries. Let's say you have Pico.css installed using npm:

npm install pico.css

Now, you want to include Pico.css in your SvelteKit project, but how?

The Solution: Leveraging SvelteKit's Static Assets

SvelteKit is designed to handle static assets efficiently. You can easily include Pico.css in your project by following these steps:

Import Pico.css in your app.html file:

<html lang="en">
<head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="/node_modules/pico.css/pico.min.css"> 
    <title>My SvelteKit App</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>

This line imports the pico.min.css file directly from your node_modules directory.

Use Pico.css in your Svelte components:

Now, you can freely use the CSS classes defined in Pico.css within your Svelte components. For example:

<script>
  import { onMount } from 'svelte';

  let message = 'Hello, world!';
</script>

<div class="container">
  <h1>{message}</h1>
  <p class="text-gray">This is a paragraph with Pico.css styling.</p>
</div>

Key Insights:

Static Asset Handling: SvelteKit's build process automatically copies your static assets, including CSS files from node_modules, to the appropriate output directory. This makes integration seamless.
app.html is the Key: The app.html file is the entry point for your entire SvelteKit application. Including your CSS stylesheets here ensures they are loaded correctly in every page.

Advantages of Using Pico.css:

Lightweight and Fast: Pico.css is incredibly small, contributing minimal overhead to your website's loading time.
Simple and Consistent: Its straightforward structure makes it easy to understand and use, promoting a consistent look and feel across your project.
Flexible and Customizable: While Pico.css provides a foundation, you can easily customize it to match your specific design needs.

Conclusion:

Integrating Pico.css into your SvelteKit project is a breeze with SvelteKit's static asset handling. Remember to include the CSS file in your app.html, and then you can leverage the minimalist styling of Pico.css throughout your components. This combination empowers you to create beautiful and functional web applications effortlessly.

Resources:

Pico.css: https://picocss.com/
SvelteKit Documentation: https://kit.svelte.dev/