Hi! I’m new to plugins and I’m trying to create one that includes some css and js assets. I followed the guide and put my .css inside /myplugin/assets/css but I don’t undersatand what should I do now to get the css loaded in the webpage frontend.
thanks in advance, best.
For the frontend, you always have to include your stylesheets/scripts manually in the head/footer like normal. Autoloading of plugin assets only works in the Panel.
oh ok! Thanks!
It works locally but when it goes online, my server refuses to serv the stylesheet of my plugin, loaded through : <?= css('/site/plugins/front-comments/assets/style.css');
The resource at
"http://esaj-dev.adrien-payet.fr/site/plugins/front-comments/assets/style.css"
was blocked due to a MIME type ("text/html ")
incorrect (X-Content-Type-Options: nosniff).
esaj-dev.adrien-payet.fr
I’m not sure but it seems that the Kirby router redirects the call to a unexisting page.
You have added your question to an old Kirby 3 post. What is your Kirby version?
What the error message means is that your style.css doesn’t have the right mime type (text/css), but instead text/html.
If you are on Kirby 4, your plugin assets should be server like this:
<?= css($kirby->plugin('foo/bar')->asset('styles.css'));
Not directly from the site folder
Thank you. Indeed I’m on Kirby 4. I open another topic if needed.
This was very helpful in solving my problem on the frontend of the site. Is there documentation on how to access plugin assets via Vue for use in a block preview in the panel? I specifically trying to display an image within the preview that is stored in the plugin’s /assets folder. To be more specific, it looks like this…
[path-to-my-plugin]/assets/masks/circle.png
Looks like using a path like this (without the hash) works in the panel. No idea why but it does…
Referencing with CSS var:
--mask: url(/media/plugins/[plugin-author]/[plugin-name]/masks/circle.png);