如何修改BrowserSync代理脚本注入新CSS文件而非替换原有文件？

当然可以实现！你原来的脚本是直接替换了在线CSS的引用，咱们调整一下rewriteRules的逻辑，就能保留原有的CSS文件，同时把本地的my.css注入到它后面。

修改后的脚本代码 #

var browserSync = require('browser-sync');
browserSync({
  proxy: 'http://example.com/',
  files: ['build/**'],
  serveStatic: ['build'],
  rewriteRules: [
    {
      // 匹配包含目标CSS的完整link标签（忽略大小写，兼容不同写法）
      match: /<link[^>]+href="\/css\/example\.css"[^>]*>/i,
      fn: function(match) {
        // 保留原有的CSS链接，再追加本地的my.css引用
        return `${match}\n    <link rel="stylesheet" href="/my.css">`;
      }
    }
  ]
});

关键调整说明 #

1. 正则表达式优化：
   原来的正则只匹配了CSS文件的路径，现在改成匹配完整的<link>标签，用/<link[^>]+href="\/css\/example\.css"[^>]*>/i可以兼容标签里的其他属性（比如type="text/css"、media="screen"等），/i标记确保忽略大小写匹配。

2. 注入逻辑替换：
   不再直接替换原路径，而是把匹配到的原标签完整保留，然后在它后面追加一行新的<link>标签指向本地的my.css。这样页面会先加载原在线CSS，再加载本地的样式，本地样式会自然覆盖原样式（遵循CSS的“后定义优先”规则，除非原样式带有!important）。

注意事项 #

• 确保你的my.css文件放在serveStatic配置的build目录下，这样BrowserSync能正确访问到这个本地文件。
• 如果原网站的CSS引用路径有变化（比如带版本号/css/example.css?v=1.0），你需要调整正则表达式来适配，比如改成/\/css\/example\.css(\?.*)?/来匹配带参数的情况。

内容的提问来源于stack exchange，提问作者Guerrilla