在 scss 中所做的更改不起作用

Question

当我运行 gulp 时，它会识别在任何 scss 文件中所做的任何更改。它甚至将其缩小为 build 文件夹中的 css 文件夹中的 style.min.css，并且网站在我的本地主机上刷新。

我的问题是，我在 scss 文件中所做的任何更改实际上都没有发生在网站上。如果我在 style.css 文件中进行更改并手动刷新站点，它会使用所做的相同更改进行更新。

gulp.task('sass', function() {
   return gulp.src('./sass/style.scss')
      .pipe(plumber(plumberErrorHandler))
      .pipe(sass())
      .pipe(autoprefixer({
         browsers: ['last 2 versions']
      }))
      .pipe(cssnano())
      .pipe(rename('style.min.css'))
      .pipe(gulp.dest('./build/css'));
});

gulp.task('watch', ['browserSync', 'sass', 'scripts'], function (){
   gulp.watch('./sass/*.scss', ['sass']);
   gulp.watch('./js/*.js', ['scripts']);
});

Answer 1

您正在查看路径 ./sass/*.scss，我假设您在此 ./sass/ 文件夹中有一个子文件夹。

您的部分文件已导入，因为您可以在编辑主 style.scss 样式表时看到更改。

问题在于监视任务仅监视名为 sass 的文件夹，但它还必须监视子文件夹及其 .scss 内容。例如：

gulp.task('watch', ['browserSync', 'sass', 'scripts'], function (){
    gulp.watch('./sass/*.scss', ['sass']);
    gulp.watch('./sass/**/*.scss', ['sass']);
    gulp.watch('./js/*.js', ['scripts']);
});

/**/ 确保所有子文件夹及其内容也受到关注。