Browsersync Proxy Site Inject CSS

Question

プロキシURLをポイントしているときにBrowsersync serveStaticの理解に問題があります。私の読書から、私はプロキシされたウェブサイトにCSSを注入できるはずです。実際には、私はそれを動作させるように見えることはできません。 rewriteRulesを使用してプロキシURL上の既存のCSSファイルをローカルのCSSに置き換えましたが、ファイルを置き換えない場合は純粋なCSSを挿入できないようです。指定するには、私のCSSは単に読み込まれていません。ネットワークトラフィックを見ると、スタイルシートが読み込まれていません。私はserveStaticを誤解していますか、私の設定が間違っていますか？以下は私のGulpファイルからの簡略化された抜粋です。

参考までに私はBrowsersync V2.8.3を使用しています。

gulp.task('build-css',() => { 
    return gulp.src('src/scss/**/*.scss') 
     .pipe(gulpif(arg.sourcemap, sourcemaps.init())) 
     .pipe(sassLint()) 
     .pipe(concat('styles.scss')) 
     .pipe(sassLint.format()) 
     .pipe(sassLint.failOnError()) 
     .pipe(sass()) 
     .pipe(autoprefixer('last 10 versions')) 
     .pipe(cssnano()) 
     .pipe(sourcemaps.write()) 
     .pipe(gulp.dest('web/css')) 
     .pipe(browserSync.stream({ match: '**/*.css' })); 
}); 

gulp.task('serve',() => { 
    browserSync.init({ 
     proxy: 'www.sampleurl.com', 
     serveStatic: ['web/css'], 
     reloadDelay: 50, 
     reloadDebounce: 250 
    }); 
    gulp.watch('src/scss/**/*.scss', ['build-css']); 
}); 

Answer 1

私は完全にBrowsersync recipes sectionを逃しました。そこに私の解決策が見つかりました。そこで、Proxy example + injecting custom css fileという特定のレシピが見つかりました。基本的には、ファイルのリストをインクルードしてページロード時にポップアップするだけの方法はないようです。代わりに、snippetOptionsを使用してheadタグのようなものに一致する必要があります。次に、マッチしたヘッドコンテンツにリンクタグを追加するだけです。以下のコードはレシピからコピーされています。

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

browserSync.init({ 
    proxy: "example.com", 
    serveStatic: ["app/static"], 
    files: "app/static/_custom.css", 
    snippetOptions: { 
     rule: { 
      match: /<\/head>/i, 
      fn: function (snippet, match) { 
       return '<link rel="stylesheet" type="text/css" href="/_custom.css"/>' + snippet + match; 
      } 
     } 
    } 
});