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

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?

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.

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

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 10 years ago

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

Jups :) Only have one layout defined ;)

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?

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 10 years ago

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

From Component:

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

Last updated 6 years ago