Adding a NPM CSS library to Sapper or Routify

I’m experimenting here, but this seems like a good way to add a small CSS library from NPM for global styles to a Sapper or Routify (Svelte) app. It has few dependencies and you can benefit from hot reloading.

Post meta:

Originally written for Sapper, but can be applied to Routify. And it would probably be about the same for a normal Svelte-app.

1. Install Svelte Preprocess and Postcss:

npm i -D svelte-preprocess postcss

2. Install your CSS library of choice:

npm i -D floor-typography-css

3. Create a new component for the CSS library, e.g., FloorTypography.svelte, with this line of code:

<style global src="../../node_modules/floor-typography-css/floor-typography-full.css"></style>

4. Import the component into src/routes/_layout.svelte and use it in the HTML there:

<script>
    import CSSLib from '../components/FloorTypography.svelte'
</script>

<CSSLib />

5. In rollup.config.js (for Webpack see Svelte Preprocessor) import Svelte Preprocess and included it in svelte()‘s object parameter. One place in Routify’s Rollup config and two places in Sapper’s. Example for Sapper:

import sveltePreprocess from 'svelte-preprocess'

const preprocess = sveltePreprocess()

// ... then add preprocess to `client` and `server` `plugins`, in `svelte`:

export default {
    client: {
        // ...
        plugins: [
            // ...
            svelte({
                // ...
                preprocess
                // ...
    server: {
        // ...
        plugins: [
            // ...
            svelte({
                // ...
                preprocess
                // ...