Home
Support Forums

Rewrite is not loading the CSS of destination site

Hello,

Goal:
I am testing Netlify rewrite rules which would facilitate handoffs/linking from the blog microsite to the main website, both of which are hosted on Netlify.

Issue:
I have created a test page (Blog | Guide Dogs UK Blog) with 2 hyperlinks next to the search box, the second hyperlink (which is the issue here) goes to the home page (www.guidedogs.org.uk) which is also hosted on Netlify. It does rewrite but the rendered page has no CSS applied. I would expect the page to be rendered as if I was visiting the URL directly.

Is there any configuration/setup I can do to make this work as expected?

Kind regards,

Jason

Hi @Jasongd

Thanks for reaching out!

I see you also posted in a Help Desk ticket, so I’ll post both there and here in case anyone else has a similar issue.

A limitation of rewrites and proxies is that rewrites can cause pages that use assets specified through relative paths to load incorrectly. The solution is to use either absolute paths or a < base > tag.

Another solution, and possibly the easiest, would be to enable asset optimization (bundled CSS and bundle JS) within your Site’s Settings > Asset optimization.

Let us know if you have any further questions and we’ll be happy to assist. Thanks!

Hi Melvin,

Great idea as this would be useful for others who come across the same issue. I will arrange with the PM to approach how to test this.

I presume all these solution would need to be applied to the destination site (i.e. www.guidedogs.org.uk)?

In which case hopefully we can go with your last solution of using Asset optimisation as the others may involve a fair amount of code changes.

Kind Regards,

Jason

Hi @Jasongd,

Yes, all of those settings would apply to destination URL.

I’d like to add a note that even though it’s listed in docs as limitation of proxy, it’s not really a limitation of Netlify. It’s how browsers resolve relative URLs - they check for address in the address bar (or the base tag) and resolve the relative paths to that address.

A limitation of asset optimization however is that, it will not optimise all CSS/JS assets in your deploy - it will just optimise all CSS/JS assets that are referenced in your HTML files at deploy time. If your SSG adds scripts and assets after the page loads, they won’t be processed by asset optimization.

Hi Hrishkesh,

Thank you for clarifying; that does make sense.

The origin URL will be www.guidedogs.org.uk but this is very useful to know when deploying the blog microsite which we are developing.

In light of this proxy limitation we would have to consider the 3 options available as outlined by Melvin.

I’ll test this out further.

Kind regards,

Jason

1 Like