CMS Development

Tobe
Member

Included CSS files not updating after changes

Hi all,

 

first post here - I hope I'm posting in the right category. I've decided to split up css files into separate components to make everything a bit more modular and maintainable. So I'm including smaller portions of the css in a single main.css file like this:

{% include "custom/page/css/mobile-cta.css" %}

However, when i do changes in the included file (e.g. mobile-cta.css) the main,css file will not update its css unless i change something directly in the main.css file. Has anyone encountered similar problems? Right now for me the only way is to make the changes in the included file, then open up main.css and remove a semicolon there / add it back in and save. That way the included file will be reloaded and the changes will appear correctly on the live pages...

10 Replies 10
nhialee
Member | Partner
Member | Partner

Included CSS files not updating after changes

It was frustrating. I try clearing my cache and refreshing my browser but the latest CSS document change never got through. I have to manually go into the landing page or website page and click "save" and press "update" in order for the minified CSS to grab the latest change. Once that was done, refreshing the page finally worked. I haven't try renaming the CSS document name but that may be a better solution in the future.

0 Upvotes
radar
Contributor

Included CSS files not updating after changes

After a little investigation this might be because HubSpot doesn't have an SLA with their CDN provider(s).

 

When we create a hosted CSS or JS file in Design Manager it gets minified, cached, etc.  Upon making changes to said file, the cache is not necessairly immediately purged upon save in Design Manager.

 

In a pinch and depending on your setup, if you're leveraging the "Attached style sheets" function in Content Settings, you can create two versions of the same file and swap back and forth. For example, you might have style.css and style-1.css. Keep your changes the same in both and then remove and add as required using the "Attached style sheets" dialog. 

 

I don't in truth recommend this for apparent reasons. Though sometimes you're in a bind and you need to get an update out there quickly. Maybe in the future HubSpot will allow for a manual flush.

0 Upvotes
RomanGruit
Top Contributor

Included CSS files not updating after changes

Are there any updates about this issue?

0 Upvotes
radar
Contributor

Included CSS files not updating after changes

Bump... This has been happening to me across multiple portals (15+), HubSpot support does not seem to be able address. Additionally, there does not seem to be a predictable way to know if an update will render near instantaneously or in minutes plus.

 

For example, I pushed a change to a CSS file in this portal at the time of typing this note and it still has not rendered.

 

Further, assets loaded using the Public URL token do not load as minified files until after a short delay. This is to be expected to some extent, but the issue has never been this bad. I've noticed HubSpot has changed the rendering order of some content as well including the RSS feed module. I now have to defer certain JS until after page load to effect this module for example.

 

Would be great if HubSpot could chim in with some insight.

ZacharyRaineri
Participant

Included CSS files not updating after changes

I'm having the same issue and it's incredibly frustrating when trying to check changes quickly. I've verified that the min.css that hubspot changes the css files into is pulling the updates with a massive delay.

JackMaden
Participant

Included CSS files not updating after changes

Hey - any update on this at all? I'm having the same issue. The minified css file Hubspot generates isn't reflecting my changes. We have a new website launch coming soon & I'm considering moving the entirety of the css inline to ensure everything loads properly...

0 Upvotes
ZacharyRaineri
Participant

Included CSS files not updating after changes

My solution has been to rename the css doc on each save. The new file name won't be cached by the system or browser so it should update. You just can't reuse an old file name because it may still be cached. I started with a.css and moved through the alphabet.

 

It's more work, but it works and may be better than inlining depending on your amount of CSS/your code setup.

 

Hope this helps!

JackMaden
Participant

Included CSS files not updating after changes

Fantastic, thanks Zachary. I've raised a ticket with Hubspot & they're looking into it but I'll link them your solution, as this seems to confirm it's definitely a caching issue with whatever minifying service they're using. Thanks very much again for your help! 

0 Upvotes
aliciaw
Top Contributor

Included CSS files not updating after changes

Hi @Tobe, are you replacing the CSS files or just updating them? I know that there can be a delay with you replace files in the file manager so I'm wondering if it's the same thing here? 

Are you linking them to other CSS documents or just attaching multiple files in the header of your pages?

0 Upvotes
Tobe
Member

Included CSS files not updating after changes

Hi @aliciaw - I'm updating the css files with the "Publish" button. I am not including multiple css files in the header of my pages, I'm including the partial css files via the {% include "somefile" %} in one main css file that i load in my header. I don't think this is related to the delay as i have no delay at all when i modify files that I load directly in the header. This only happens for files loaded through the includes.

0 Upvotes