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:

detects changes to scss files
compiled them to css
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

我可以使用rewriteRules浏览器同步选项来实现您所描述的内容。

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

这将拦截对https://cdn.shopify.com/s/files/1/0878/7368/t/2/assets/style.css?12713062062911383123的请求，并将其替换为style.css?1271306206291138312，具体取决于您的本地设置，或者可能需要进一步调整。

请不要忘记根据您的项目要求设置bsFiles，proxy，serveStatic，serveStaticOptions等选项。

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

1 个答案: