浏览器同步不为远程站点注入 CSS答案

【问题标题】：Browser-sync not injecting CSS for remote site浏览器同步不为远程站点注入 CSS
【发布时间】：2023-04-03 12:20:02
【问题描述】：

我需要对远程站点进行 CSS 样式设置。我无法在本地托管网站以进行开发，因此我宁愿在本地调整 CSS 并查看更改，而不必等待它上传然后刷新浏览器。

似乎浏览器同步应该能够做到这一点。

我建立了一个文件bs.js：

var browserSync = require('browser-sync');

browserSync({  
  proxy: {target:'http://mysite.ca/'},   
  files: "css/*.css",
  serveStatic: ['css'] 
});

并运行“node bs.js”。它会打开一个带有 URL http://localhost:3000/ 的浏览器窗口，显示我的远程站点。到目前为止一切顺利，如果我对本地 custom.css（也在远程站点上，具有相同的目录结构）进行更改，它会显示“[Browsersync] File event [change]: css\custom.CSS”

但是，浏览器窗口中没有任何变化。如果我使用 chrome 检查器，css\custom.CSS 的内容没有改变，虽然文件名已更改为 custom.css?browsersync=1606353064487

为什么不注入更改后的 CSS 文件？

编辑：另外，我可以看到浏览器同步已注入

    <script id="__bs_script__">//<![CDATA[
    document.write("<script async src='/browser-sync/browser-sync-client.js?v=2.26.13'><\/script>".replace("HOST", location.hostname));
//]]></script>

进入远程站点，所以这不是问题。

【问题讨论】：

标签： javascript css browser-sync

【解决方案1】：

想通了。您需要将 staticStatic 设置为您提供本地文件的目录。如果您的本地目录结构与远程站点不同，请使用重写规则。 match 参数应该是远程站点上 CSS 文件的路径。返回参数是您将提供的本地 CSS 文件的名称。好像是相对于serveStatic路径的，所以这里就不放完整的文件路径了。

var browserSync = require('browser-sync');

browserSync({
  
  proxy: 'https://mysite.dev/',
 
  
files: "./themes/bootstrap_sass/css/*.css",
serveStatic: ['./themes/bootstrap_sass/css'],
rewriteRules: [
  {
    match: new RegExp('sites/mysite.dev/themes/bootstrap_sass/css/style.css'),
    fn: function() {
      return 'style.css';
    }
  }
]
 
});

【讨论】：