Gulp browser-sync reloading and not injecting css

Question

Can I get some insight on why I'm getting this message in chrome console, it seems to prevent css code injection.

Browsersync reloading all stylesheets because path 'html\css\theme.css' did not match any specific one.

I suspect it's a path issue i have, but I can't seem to figure it out. I tried to strip as much as I could.

Here's my folder structure:

/_base/gulpfile.js
/_base/html/index.html
/_base/html/css/theme.css
/_base/src/scss/theme.scss

And here's my code:

// Defining requirements
var gulp = require('gulp');
var plumber = require('gulp-plumber');
var sass = require('gulp-sass');
var watch = require('gulp-watch');
var browserSync = require('browser-sync').create();
var sourcemaps = require('gulp-sourcemaps');
var notify = require('gulp-notify');

// var style lint

//general error handler with plumber
var pb_errorHandler = { errorHandler: notify.onError({
  title: 'Gulp',
  message: 'Error: <%= error.message %>'
})
};

// stage 1 - HTML CSS JS FILE CREATION
// A. scss to css
var s1_sassOptions = {
  errLogToConsole: true,
  outputStyle: 'expanded'
};

// compile stage1 scss files, use plumber and sorcemaps. 
// to do : need to check what error handling to use - curently 2
gulp.task('create-css', function () {
  gulp.src('src/scss/theme.scss')
  .pipe(plumber(pb_errorHandler))
  .pipe(sourcemaps.init({loadMaps: true}))
  .pipe(sass(s1_sassOptions).on('error', sass.logError))
  .pipe(sourcemaps.write(undefined, { sourceRoot: null }))
  .pipe(gulp.dest('html/css/'))
});


// automatically reloads the page when files coressponding to this paths are changed:
var s1_broswserSync_files = [
'html/css/*.css'
];

// browsersync options
var s1_browserSync_options = {
  server:"./html"
};


gulp.task('browser-sync', function() {
  browserSync.init(s1_broswserSync_files, s1_browserSync_options );
});

// Starts watcher. Watcher runs gulp sass task on changes
gulp.task('stage1-watch', function () {
  gulp.watch(['src/scss/*.scss'], ['create-css']);
});

// Starts watcher with browser-sync. Browser-sync reloads page automatically on your browser
gulp.task('stage1', ['browser-sync', 'stage1-watch'], function () { });

You have gulp.src('src/scss/theme.scss') but your path appears to be 'src/sass/scss/theme.scss' — Mark, Jan 12 '18 at 20:38
the path was really: /_base/src/scss/theme.scss, but i accidentally posted the wrong one, thanks for noticing. — Alexut, Jan 12 '18 at 21:51

score 1 · Answer 1 · answered Jan 15 '18 at 15:10

It looks like your options for browserSync.init() aren't correct. The init method takes two optional arguments of configuration options and a callback function. See https://browsersync.io/docs/api#api-init

You want to setup your options like this.

var s1_browserSync_options = {
    server:"./html",
    files: "html/css/*.css"
};

gulp.task('browser-sync', function() {
    browserSync.init(s1_browserSync_options );
});

Take a look at the SASS and CSS injecting in the docs https://browsersync.io/docs/gulp#gulp-reload

Gulp browser-sync reloading and not injecting css

1 Answers1