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

Question

I'm setting up gulp-sass to use in my project but am having difficulty getting it to work. I have tried almost every link on here to set up my gulp tasks and watch, but can't seem to figure out why my scss styles are not loading in the browser (I am running it locally).

I have basic styles in my .css stylesheet and my .scss stylesheet for testing, and the only styles that get triggered are the ones in .css - I have no error messages in the browser or when I run gulp sass in the root of my project.

sources tab in the inspector

running gulp sass in the command line

I set up my gulp-sass task with help from here: https://medium.freecodecamp.org/how-to-set-up-gulp-sass-using-the-command-line-if-youre-a-beginner-17729f53249

My project structure is as follows:

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

and I linked my css stylesheet in the index as <link rel="stylesheet" href="app/css/styles.css">.

I have used gulp and sass before at work, but everything was set up already and this is my first time setting it up on a solo project. Any and all help is greatly appreciated :) thank you.

Answer 1

If you want your final scss transpilation to produce styles.css you have to do either of two things:

1. Either start with styles.scss instead of main.scss and sass will automatically name it styles.css or

2. Modify your sass task to rename the resultant file:

   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"));
   });
   

[If you are using gulp v4 (run gulp -v), your watch task won't work. Try:

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

in that function and get rid of the second sass task altogether.]