Question

我正在设置gulp-sass以便在我的项目中使用，但是很难使其正常工作。我已经尝试了这里几乎所有的链接来设置我的gulp任务并观看，但是似乎无法弄清楚为什么我的scss样式没有加载到浏览器中（我在本地运行）。

我在.css样式表和.scss样式表中具有基本样式以进行测试，并且唯一触发的样式是.css中的样式-我在浏览器中或运行{{1}时都没有错误消息}在我项目的根目录中。

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

我的项目结构如下：

gulp sass

我的gulpfile.js：

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

并且我将索引中的CSS样式表链接为'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(); } );。

在上班之前，我已经使用过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不会显示在浏览器中

1 个答案: