Browsersync and/or Gulp Keeps Resetting CSS

Question

I have Gulp and Browsersync setup. However, whenever I run npm start, the CSS in the Style.css file resets. The index.html changes remain and I have no trouble pushing the initial CSS changes to github. Does anyone know why these CSS additions are being re-set and if there is anything I can do to stop it from happening?

https://github.com/jwolfe890/bootProj

Answer 1

Your project is set up to use scss. This gets compiled to normal css.
If you write your code directly into the css file, the gulp job will just recompile the scss and overwrite your changes.
To make this less likely to happen, a convention is to not have the output of your gulp job write into the same directory you use for developing (src).

gulp.task('sass', function(){
  return gulp.src(['node_modules/bootstrap/scss/bootstrap.scss','src/scss/*.scss'])
    .pipe(sass())
    .pipe(gulp.dest("src/css")) <-- put this somewhere else
    .pipe(browserSync.stream());
});

To fix your issues, just write your style in the scss file.