Gulp 没有将 scss 代码编译成 css答案

【问题标题】：Gulp isn't compiling the scss code into cssGulp 没有将 scss 代码编译成 css
【发布时间】：2018-10-23 20:02:40
【问题描述】：

我正在尝试使用 gulp 将 scss 转换为 css。我正在对 scss 进行更改，而 css 没有任何变化。有人对此有任何想法吗？谢谢

我的文件结构是这样的：

index.html    
app/scss/styles.scss   
app/css/styles.css

file structure image

我的 gulp 文件包含这个：

     var gulp = require('gulp');
      var sass = require('gulp-sass');

  gulp.task('sass', function(){
   return gulp.src('app/scss/styles.scss')
     .pipe(sass()) // Converts Sass to CSS with gulp-sass
     .pipe(gulp.dest('app/css'))
});

      gulp.task("watch", function() {
     gulp.watch("app/scss/**/*.scss", ['sass']);
       });

【问题讨论】：

css文件夹中有styles.css文件吗？
是的，我在 CSS 文件夹中有一个 styles.css
啊，在你编辑之后 - 你有一个文件观察器来观察 .scss 文件的变化吗？
我已经编辑了我的帖子，我厌倦了使用这个 gulp.task("watch", function() { gulp.watch("scss/**/*.scss", ['scss'] ); });
除了styles.scss 之外，您还有其他.scss 文件要编译吗？我建议在名为 sass 的 gulp 任务中对 gulp.src 进行更改——将其从 app/scss/styles.scss 更改为 app/scss/**/*.scss。 **/* 是一种告诉它检查所有子目录中以 .scss 结尾的任何文件的方法“

标签： css sass compilation gulp

【解决方案1】：

将文件和dest的路径更改为以下

gulp.task("sass", function () {
  return gulp
    .src("./app/scss/styles.scss")
    .pipe(sass())
    .pipe(gulp.dest("./app/css"))

});

【讨论】：