浏览器同步是否可以在注入时覆盖托管在 CDN 上的 CSS 文件？答案

【问题标题】：Can browser sync overwrite CSS file hosted on CDN on injection?浏览器同步是否可以在注入时覆盖托管在 CDN 上的 CSS 文件？
【发布时间】：2015-09-13 06:28:17
【问题描述】：

我不确定如何仅在帖子标题中提出问题，所以这里是完整的故事：

我正在开发一个 shopify 主题，但我总是不得不保存我的 CSS 更改、切换浏览器选项卡并点击重新加载以查看我所做的事情，这让我有点恼火（是的，我确实发现了这个主题检测本地更改并上传它们的 gem，但这不会让我重新加载...）。

所以我的计划是提出一个 Gulp 任务，它执行以下操作：

检测对 scss 文件的更改
将它们编译为 css
使用将 shopify 主题 url 代理到本地主机地址的浏览器同步注入更改

我现在面临的问题是，shopify 会立即将更改的资产上传到 cdn，并在预览主题时从那里加载它们。由于 css 包含在不同的域中，我猜浏览器同步不再识别该文件，并且用要注入的更改覆盖该文件。

所以剩下的问题如下：

如果我的主题预览 URL 代理到像 http://localhost:3000 这样的本地地址从像 https://cdn.shopify.com/s/files/1/0878/7368/t/2/assets/style.css?12713062062911383123 这样的地址加载 css 文件，我可以告诉浏览器同步在 gulp 中用要注入的更改完全覆盖该文件吗？

希望我在这里说得通。

【问题讨论】：

browsersync 的注入部分通过使用 websockets 工作，类似于 AJAX 请求，这意味着页面上的内容（在这种情况下为样式）无需刷新即可更新。问题是你没有在本地托管你的页面，所以除非你能想办法在有问题的远程服务器上配置 websocks (shopify)，否则它们无法动态检测到更改，从而刷新你的页面。
非常真实！虽然我也使用浏览器同步中的代理选项来处理本地运行的 php 站点上的 css 注入。我有点认为浏览器同步不一定需要文件系统访问它正在刷新的文件？

标签： css gulp shopify browser-sync

【解决方案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 等选项。

【讨论】：