Gulp sass不会抛出任何错误，但我的SCS不会显示在浏览器中

我正在设置gulp sass，以便在我的项目中使用，但很难使其正常工作。我几乎尝试了这里的每个链接来设置我的吞咽任务和观看，但似乎不明白为什么我的scss样式没有加载到浏览器中（我在本地运行它）

我在.css样式表和.scss样式表中有基本样式用于测试，唯一触发的样式是.css中的样式-我在浏览器中或在项目根目录中运行

gulp sass

时没有错误消息

在这里的帮助下，我设置了gulp sass任务：

我的项目结构如下：

ProjectName
-> app
--> css
---> styles.css
--> fonts
--> images
--> js
--> scss
---> main.scss
-> node_modules
gulpfile.js
index.html
package-lock.json
package.json

my gulpfile.js：

'use strict';

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

gulp.task("sass", function () {
 gulp.src("app/scss/*.scss")
 .pipe(sass().on("error", sass.logError))
 .pipe(gulp.dest("app/css"));
 });

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

 gulp.task("sass", function(done) {
     console.log("Hello!"); done(); }
 );

我在索引中将css样式表链接为

---

我以前在工作中使用过吞咽和沙斯，但一切都已经准备好了，这是我第一次在一个单独的项目中设置它。非常感谢您的帮助：）谢谢。

如果您想让最终的scss演示产生

样式。css

您必须做以下两件事之一：

要么以

styles.scss

而不是

main.scss

开始，sass将自动将其命名为

styles.css

，要么

修改

sass

任务以重命名结果文件：

var rename = require("gulp-rename");

gulp.task("sass", function () {
   return gulp.src("app/scss/*.scss")
    .pipe(sass().on("error", sass.logError))
    .pipe(rename('styles.css`))
    .pipe(gulp.dest("app/css"));
});

[如果您正在使用gulp v4（运行

gulp-v

），您的

监视任务将无法工作。请尝试：

gulp.watch("app/scss/*.scss", gulp.series("scss"));

在该函数中，并完全摆脱第二个
sass
任务。]
如所写，您的
main.scss
文件将编译为
main.css
，您在html中不会链接到该文件。你想让
main.scss
作为你的
styles.css
结束吗？啊，这是我的错误。最初，我将它们都命名为main.css，但我将它们保留为style.scss/style.css。我必须创建.css文件吗？还是它会根据.scss自动为我创建？Sass会自动将
style.scss
重命名为
style.css
。谢谢，马克。我是否应该有一个活动的styles.css文件并将其链接到我的HTML中？我不清楚sass是否创建了它，或者我是否必须创建它，并且sass将使用样式填充它。如果您有
style.scs
，sass将首先创建
style.css
。在您的html链接中指向
style.css
。非常感谢您的帮助。我已将这两个文件重命名为styles.scss和styles.css-我还替换了
gulp.watch（“app/scss/*.scss”，“scss”]）
，并根据您的建议删除了sass任务。但它仍然不起作用。也没有错误。是的，我的答案中新的gulp.watch替换了您的
sass:watch
任务的第二行。谢谢，马克。不幸的是，这些改变并没有解决我的问题。在没有错误的情况下调试也很困难。嘎。编辑：如果没有
sass
任务，我会得到一个错误“以下任务没有完成：sass您忘记发出异步完成信号了吗？”