在开发过程中不会应用新的CSS类

Question

我正在本地环境中开发一个静态网站，其中包含gulp，sass，atom作为我的文本编辑器和最新的Chrome。

出于某种原因，有时当我创建一个新类时，我的浏览器会不断地拒绝识别它。

最近的例子：

.projects {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    border: 10px solid red;
    width: 1000px;
    height: 1000px;
}

.project {
    width: 400px;
    height: 200px;
    border: 1px solid white;
}

你可以在标记中看到它，就在那里：

如果我查看我的页面来源，那就是：

子元素.project正好得到它的CSS：

但.projects元素绝对拒绝应用其样式：

我试过了：

1. 重新启动gulp
2. 重新启动Chrome
3. 重命名课程（仍然无效）
4. 应用另一个类来检查（应用样式没有问题）
5. 在不同的页面上使用它，相同的CSS文件访问（没有运气）
6. 主要是，一切都按预期工作，但不管我做什么，这个元素都不会有任何新的风格。

完全免责声明

我已经在这个领域工作了多年，这没有任何意义。我相信这个错误可能与某种缓存，使用BrowserSync进行实时重新加载等有关。

附件是我的gulpfile.js，如果它有任何亮点：

const gulp = require('gulp');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const plumber = require('gulp-plumber');
const browserSync = require('browser-sync').create();

gulp.task('sass', function(){
  return gulp.src('app/sass/style.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer({
        browsers: ['last 2 versions'],
        cascade: false
    }))
    .pipe(gulp.dest('app/css'))
    .pipe(browserSync.stream())
});

gulp.task('browserSync', function() {
  browserSync.init({
    server: {
      baseDir: './app'
    },
  })
})


gulp.task('watch', ['browserSync', 'sass'], function (){
  gulp.watch('app/sass/*.scss', ['sass']);
  // Reloads the browser whenever HTML or JS files change
  gulp.watch('app/**/*.html', browserSync.reload);
  gulp.watch('app/about-us/index.html', browserSync.reload);
  gulp.watch('app/js/*.js', browserSync.reload);
  gulp.watch('app/css/*.css', browserSync.reload);
});