首页 > 解决方案 > 使用代理浏览器同步注入 css 文件

问题描述

我有一个用于代理实时网站的脚本,因此我可以处理它的 css。它通过用重写的本地 css 文件替换在线 css 文件来工作。

这并不理想。如果我可以在他们的文件下面注入一个全新的文件会更好。

是否可以修改此脚本以添加 css 文件而不是重写它。

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

browserSync({
  proxy: 'http://example.com/',
  files: ['build/**'],
  serveStatic: ['build'],
  rewriteRules: [
      {
        match: new RegExp('/css/example.css'),
        fn: function() {
          return '/my.css';
        }
      }
  ]
});

所以基本上我想在 example.css 下面添加 my.css 而不是替换它。

标签: javascriptnpmbrowser-sync

解决方案


我通过替换结束标签让它工作:

match: new RegExp('<\/head>'),
        fn: function() {
          return '<link rel="stylesheet" type="text/css" href="https://example.com/test.css" media="all" /></head>';
        },

推荐阅读