Home » Javascript » Inject css file with proxied browsersync

Inject css file with proxied browsersync

Posted by: admin August 19, 2018 Leave a comment

Questions:

I have a script I use to proxy a live website so I can work on it’s css. It works by replacing online css file with local css file with a rewrite.

This isn’t ideal. It would be much better if I could inject a completely new file below their file.

Is it possible to modify this script so that it adds the css file instead of re-writing it.

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';
        }
      }
  ]
});

So basically I want to add my.css below example.css instead of replacing it.

Answers: