CSS file doesn't load on page transition

[Damiano31]

Hi, I have a problem with the css and js files. I would like to use different style sheets and scripts on the various pages. when I open the page everything normally works, but when I change the page using the transition it is not loaded. How can I solve it?

for example
in the contact page i want to use contact.css. contact.css is used only in this page. when I access the page directly the css works correctly but when i came from (for example) index.html that doesn't have contatti.css the style doesn't load.

[codymx]

As far as I'm aware, everything will need to be loaded outside of the container. Combine your CSS files into one and it'll work fine. In my opinion, this is only adding more http requests every time the user goes to another page, increasing the load time.

As for JS, it won't be re-evaluated when a transition completes, so it too will have to be compiled and loaded outside of the container. You'll have to reinitialize any functions using barba hooks.

On barba v1:

Barba.Dispatcher.on('newPageReady', function(currentStatus, oldStatus, container) {
  // JS functions here
});

on barba v2:

barba.hooks.afterEnter( ( data ) => {
  // JS functions here
} );

[xavierfoucrier]

I agree with @c0mrx,

Just one file for CSS and another one for JS = no more https requests when you switch between pages.

Anyway, this is a feature that will be implemented soon in the v2, called @barba/head, allowing Barba to automatically fetch head files that are not in the cache, mostly scripts and stylesheets.

😉

[Geestig]

Any update about the @barba/head addition?

I have a similar issue.

I have some 'detail' pages that get some inline styles injected. The styles get inject in the head and are specific for each 'detail' page. So it should reload the head on every 'detail' page.

[xavierfoucrier]

Hi @Geestig,

Still a feature to implement into the library, but no roadmap specified for the moment.

Thanks for using Barba and for your patience 😉