I have spent the past few days trying to figure out how to solve my problem but haven't had any luck. My gulpfile is not compiling my css even though it should be. Originally, my gulpfile was set up for sass files and everything worked perfectly. However, when I changed it to scss for this project, it just stopped working. Below is a snippet of my gulpfile:
/* Modules
------------------------------------- */
var gulp = require('gulp'),
// Tools
watch = require('gulp-watch'),
rename = require("gulp-rename"),
// Styles
sass = require('gulp-sass'),
autoprefixer = require('gulp-autoprefixer'),
// Prevent watch from crashing on errors
plumber = require('gulp-plumber'),
gulp_src = gulp.src;
gulp.src = function() {
return gulp_src.apply(gulp, arguments)
.pipe(plumber(function(error) {
console.log(error);
this.emit('end');
})
);
};
/* Paths
------------------------------------- */
var paths = {
sass: './assets/scss/',
css: './assets/css/',
templates: './assets/scss/templates/'
}
// Autoprefixer Task
gulp.task('autoprefix', function () {
gulp.src(paths.css + 'application.css')
.pipe(gulp.dest(paths.css))
});
// Sass Task
gulp.task('sass', function () {
gulp.src(paths.scss + 'application.scss')
.pipe(sass({indentedSyntax: true}))
//Autoprefixer
.pipe(autoprefixer({
browsers: ['> 2%'],
cascade: false
}))
.pipe(gulp.dest(paths.css))
});
/* METHOD ------------------------------------- */
// Watch Task
gulp.task('watch', function () {
gulp.watch(paths.scss+'**/*.scss', ['sass']);
});
//
// DEFAULT
gulp.task('default' , ['watch']);
Here is the folder structure: folder structure
Also, here is what shows up in the terminal when Gulp runs: terminal
If anyone has any insight or suggestions, I would greatly appreciate it. Thank you.