Vannut
Vannut

I'm trying to inject some CSS- file which holds styling information about my component. The style sheet is located in a folder called assets: /plugins/vannut/button/assets/style.css

The component regeistration file is located in: /plugins/vannut/button/components/Button.php I copied the onRun() function from the injecting-assets part of the documentation (https://octobercms.com/docs/plugin/components#component-assets)

public function onRun()
{
    $this->addJs('/plugins/acme/blog/assets/javascript/blog-controls.js');
}

This results in a 404 not found in my browser. So the JS is being injected in my layout.

But changing this to ->addCss() does not result in a 404 or when using the right path for the css file in the right styling.

How come? I do have a {% styles %} tag in my layout-file ...

axomat
axomat

I think you are going to have to post the actual code you have used.

And to be clear, you say "The component regeistration file is located in..." but that is your component, you should register it in the file plugin.php.

Why do you think the stylesheet is not working?

Vannut
Vannut

The default.htm of the component is loaded correctly; the component shows up in the CMS and the javascript part of the asset loader works.

Looking at the source of the page after loading I

  • can't find the css file in the developer-console
  • the element is not styled
  • can't find the css in the /combine combined-css.
axomat
axomat

Have you run php artisan cache:clear just to clear out any previous combined files?

Vannut
Vannut

Jup. No succes.

The strange thing is also when using a placeholder in my layout and putting data in the placeholder from my component. It also does not function...

Last updated

axomat
axomat

So dumb question but you are sure you are using that layout in the page that calls the component?!

Vannut
Vannut

Jups :) Only have one layout defined ;)

Crazymodder
Crazymodder

So the css is file is included to you page but it can't be found right? Did you check network tab. Is the path fully correct? Can you please post your used code?

Vannut
Vannut

O.K. Found out why it was not working for the CSS and why it did work for the JS files.

I have a layout; with a partial for the header. In this partial I had dragged a component which injected a css- and a JS-file.

As the partial was loaded after the head was parsed it couldn't put the style-link element in the {% styles %} tag. As the{% scripts %}-tag is below the partial (just before the </body> it was not rendered yet, so the js-file could be added to it.

When dragging the component to the layout, so one level up, the {% styles %} wasn't rendered already and the stylesheet got injected as expected..

So what did we learn? Always put the components in the layout instead of the partials....

Last updated

bshelling29001
bshelling29001

I had the same problem. I looked in the .htaccess file and noticed a Rewrite condition preventing access to my folders.

Linkonoid
Linkonoid

From Component:

public function onRun()
{
    $this->page->addJs('/plugins/acme/blog/assets/javascript/blog-controls.js','core');
}

Last updated

1-11 of 11