# Load Plugin assets

**URL:** <https://forum.getkirby.com/t/load-plugin-assets/16634>\
**Category:** Questions\
**Tags:** v3\
**Created:** [December 11, 2019, 4:00pm UTC](https://forum.getkirby.com/t/load-plugin-assets/16634 "2019-12-11T16:00:10Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![guidoferreyra](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/guidoferreyra/32/12544_2.png) [@guidoferreyra](https://forum.getkirby.com/u/guidoferreyra)\
**Post date:** [December 11, 2019, 4:00pm UTC](https://forum.getkirby.com/t/load-plugin-assets/16634/1 "2019-12-11T16:00:10Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [December 11, 2019, 4:06pm UTC](https://forum.getkirby.com/t/load-plugin-assets/16634/2 "2019-12-11T16:06:47Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![guidoferreyra](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/guidoferreyra/32/12544_2.png) [@guidoferreyra](https://forum.getkirby.com/u/guidoferreyra)\
**Post date:** [December 11, 2019, 4:18pm UTC](https://forum.getkirby.com/t/load-plugin-assets/16634/3 "2019-12-11T16:18:16Z")

</div>

oh ok! Thanks!

---

<div class="post-metadata">

**Author:** ![Adrieng](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/adrieng/32/14454_2.png) [@Adrieng](https://forum.getkirby.com/u/Adrieng)\
**Post date:** [March 3, 2024, 10:39am UTC](https://forum.getkirby.com/t/load-plugin-assets/16634/4 "2024-03-03T10:39:30Z")

</div>

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');`

```auto
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.

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [March 3, 2024, 10:44am UTC](https://forum.getkirby.com/t/load-plugin-assets/16634/5 "2024-03-03T10:44:47Z")

</div>

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:

```auto
<?= css($kirby->plugin('foo/bar')->asset('styles.css'));

```

Not directly from the site folder

---

<div class="post-metadata">

**Author:** ![Adrieng](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/adrieng/32/14454_2.png) [@Adrieng](https://forum.getkirby.com/u/Adrieng)\
**Post date:** [March 3, 2024, 1:03pm UTC](https://forum.getkirby.com/t/load-plugin-assets/16634/6 "2024-03-03T13:03:04Z")

</div>

> [@texnixe](#):
>
> `css($kirby->plugin('foo/bar')->asset('styles.css'));`

Thank you. Indeed I’m on Kirby 4. I open another topic if needed.

---

<div class="post-metadata">

**Author:** ![HYR](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/hyr/32/12830_2.png) [@HYR](https://forum.getkirby.com/u/HYR)\
**Post date:** [July 31, 2024, 10:42pm UTC](https://forum.getkirby.com/t/load-plugin-assets/16634/7 "2024-07-31T22:42:16Z")

</div>

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`

---

<div class="post-metadata">

**Author:** ![HYR](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/hyr/32/12830_2.png) [@HYR](https://forum.getkirby.com/u/HYR)\
**Post date:** [July 31, 2024, 10:58pm UTC](https://forum.getkirby.com/t/load-plugin-assets/16634/8 "2024-07-31T22:58:14Z")

</div>

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);`