Global scss in SvelteKit

Gyula Kerezsi — Sat, 11 Jun 2022 18:15:15 +0000

TL;DR

Run: npm i -D nodemon concurrently

Add the following npm scripts

"dev:full": "concurrently --kill-others \"npm run scss:dev\" \"npm run dev:nodemon\"",
"dev:nodemon": "nodemon --exec \"npm run dev\"",
"scss": "sass src/scss/:static/style/",
"scss:dev": "sass -w src/scss/:static/style/"

Add npm run scss && before the build, package, preview and
prepare scripts

"build": "npm run scss && svelte-kit build",
"package": "npm run scss && svelte-kit package",
"preview": "npm run scss && svelte-kit preview",
"prepare": "npm run scss && svelte-kit sync",

The setup

So I started a little project (hopefully I will write about it soon) and I
tought I would write the frontend in svelte

Then I remembered that SvelteKit was a thing, and I meant to learn it as well,
so I started a new project with it.

I was pleasantly surprised when the new project setup asked about both
Typescript and Sass (scss), I like both, but when I looked into changing the
full body style I was a bit disappointed

No support for directly compiling an scss file for the body, to include in the
app.html file

Well, let's see what options we got

The first thing that jumps out is perhaps the best option

SvelteKit's preprocessor for styles has a special :global selector, so you
could have the following block in your main __layout.svelte

<style lang="scss">
  :global {
    @import '<path to global scss>';
  }
</style>

Which works just fine, but it generates a lot of warnings in other components,
paths, that don't have any element matching some selector in your global file.

Annoying.

let's try something else

If you run sass -w <path to global>:<path to static> to have Sass compile your
stylesheet, adding <link rel="stylesheet" href="%sveltekit.assets%/global.css">
to your app.html

It works fine...

When you start svelte-kit dev

If you modify your file afterwards, it won't change even if you reload your page.

It's static why should it?

Enter `nodemon`

nodemon is a wonderful little node package/application, it watches your files,
if something changes it stops and restarts your process(es)

Which is nice, you can tell it to run the npm cript for svelte-kit and watch
your global file

So let's install nodemon with npm i -D nodemon, and to keep the npm script
short let's add a nodemon.json file

{
  "delay": 0.25,
  "watch": [
    "<path to static file>"
  ]
}

This will tell nodemon to watch the file for changes, and to wait for 250ms to
restart (might not be needed, but it helps with giving sass time to settle files)

Let's add a new npm script:

"dev:nodemon": "nodemon --exec \"npm run dev\""

I like leaving the original alone, as hopefully global styles will rarely change.

The only thing missing is a single command that will start both the Sass
compilation. Thankfully someone made concurrently

Adding `concurrently`

concurrently is a node package made for running things side by side...
conurrently

It's cross platform, so it will run on pretty much all development environments.
It has the --kill-others option which will make sure that everything dies
together

You can install it by running npm i -D concurrently

We're almost there, last thing we need to do is add a few more npm scripts

"dev:full": "concurrently --kill-others \"npm run scss:dev\" \"npm run dev:nodemon\"",
"scss": "sass <path to global>:<path to static>",
"scss:dev": "sass -w <path to global>:<path to static>"

Now running npm run dev:full will start the Sass compiler in watch mode

One more preventative measure

Just to make sure that you always have the global css compiled when packaging,
we'll modify a few of the default SvelteKit npm scripts

Let's add npm run scss && before the build, package, preview and
prepare scripts

"build": "npm run scss && svelte-kit build",
"package": "npm run scss && svelte-kit package",
"preview": "npm run scss && svelte-kit preview",
"prepare": "npm run scss && svelte-kit sync"

And that's it, now you can run npm run dev:full to get your global css
recompiling. No hot reload I'm afraid, but hitting refresh is not that hard.

PS.: should I add the generated css to .gitignore

Personally i'm not going to, it's really not that big in the first place, and
it's not likely to change a lot, at least in my setup, where I mostly just set a
few css variables

On the other hand, you are more likely to notice it missing, than seeing that
some change hasn't propagared into it.

This one is up to you

Forem: Gyula Kerezsi