Gulp-sass 没有抛出任何错误，但是我的 scss 没有显示在浏览器中

Question

我正在设置 gulp-sass 以在我的项目中使用，但我很难让它工作。我几乎尝试了这里的每个 link 来设置我的 gulp 任务并观看，但似乎无法弄清楚为什么我的 scss 样式没有在浏览器中加载（我运行在本地安装它）。

我的 .css 样式表和 .scss 样式表中有基本样式用于测试，唯一触发的样式是 .css 中的样式 - 我在浏览器中没有错误消息，或者当我在项目的根目录中运行 gulp sass 时。

sources tab in the inspector

running gulp sass in the command line

我在此处的帮助下设置了 gulp-sass 任务： https://medium.freecodecamp.org/how-to-set-up-gulp-sass-using-the-command-line-if-youre-a-beginner-17729f53249

我的项目结构如下：

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

我的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(); }
 );

并且我 link 在索引中将我的 css 样式表编辑为 <link rel="stylesheet" href="app/css/styles.css">。

我以前在工作中使用过gulp和sass，但一切都已经设置好了，这是我第一次在一个单独的项目上设置它。非常感谢任何帮助:) 谢谢。

Answer 1

如果你希望最终的 scss 转译产生 styles.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)，您的 watch 任务将无法运行。尝试：

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

在该函数中完全删除第二个 sass 任务。]

Gulp-sass 没有抛出任何错误，但是我的 scss 没有显示在浏览器中

Gulp-sass is not throwing any errors, but my scss is not display in the browser

sass

gulp

gulp-sass