How to use Vite to add styles to the panel?

Kirby 3
,
1

Trying to style the panel, but can only get it to work when I (manually) copy my panel.css in the public/ folder.

I think I saw some Kirby starter before, where they made use of vite(). I’d really prefer that to keep my styles in one place.

Can’t get it running though :frowning:

Help! :wave:

Thank you :slight_smile:

2

Which Vite plugin/implementation for Kirby are you using?

3

I’m using anoson’s kirby-vite – but I’d switch to something else if enables me to keep my styles tidy :slight_smile:

Thank you for your response!

4

Not completely sure if there is a way using this plugin. But maybe @arnoson has an idea how to get it working or it might be a neat feature to add.

You can also have a look at GitHub - lukaskleinschmidt/kirby-laravel-vite. Which is just the PHP layer and uses the laravel-vite-plugin for the build process. Although it should also work with vite-plugin-kirby with some tweaking.

5

Right now kirby-vite has no easy way to do this, so I also suggest you use kirby-laravel-vite. This is definitely a feature I want to add to kirby-vite (I just haven’t used much panel css/js yet) so I’ll put this on the roadmap!

6

@hansipete I release a new version that supports pannel assets with vite, but it requires Kirby 4. @lukaskleinschmidt uses a great workaround for Kirby 3’s panel asset restrictions (you can’t use a full URL and you can’t use multiple files which is both needed in development) by injecting the panel assets in a router hook. I decided not to do this, since Kirby 4 was released just now and got rid of these restrictions :slight_smile:

So if you are not bound to Kirby 3 checkout the documentation

1 Like
7

Thank you all for your help. I update your packages and it works like a charm. Thank you so much!