Browsersync 프록시 사이트 삽입 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; 
      } 
     } 
    } 
});