Can browser sync overwrite CSS file hosted on CDN on injection?

Question

I was not to sure how to frame the question in just the post title, so here's the full story:

I'm working on a shopify theme and am a bit annoyed by the fact that I always have to save my CSS changes, switch the browser tab and hit reload to see what I've done (yes I did discover the theme gem which detects local changes and uploads them, but that doesn't give me reloading...).

So my plan was to come up with a Gulp task which does the following:

1. detects changes to scss files
2. compiled them to css
3. injects the changes using browser sync which proxies the shopify theme url to a localhost address

The trouble that I'm facing now is that shopify uploads changed assets instantly to a cdn and loads them from there when previewing a theme. Since the css is included from a different domain, I guess that browser sync doesn't recognize that file anymore and one to overwrite with the changes to inject.

So the remaining question is the following:

If my theme preview url proxied to a local address like http://localhost:3000 loads the css file from something like https://cdn.shopify.com/s/files/1/0878/7368/t/2/assets/style.css?12713062062911383123, can I tell browser sync in gulp to overwrite exactly that file with the changes to inject?

Hope I'm making sense here.

Answer 1

I was able to achieve what you describe using the rewriteRules options for Browser Sync.

rewriteRules: [
    {
        match: /\/\/cdn\.shopify\.com\/s\/files\/(.*)\/assets\//g,
        replace: '/assets/'
    }
],

This will intercept requests to https://cdn.shopify.com/s/files/1/0878/7368/t/2/assets/style.css?12713062062911383123 and replace them with just style.css?1271306206291138312 which depending on your local setup may or may need further tweaking.

Don't forget to set up bsFiles, proxy, serveStatic, serveStaticOptions, etc options as per your project requirements.