The compilation process in my gulpfile is not successful

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.

Answer №1

Modify the second line in the paths object to:

var paths = {
  scss: './content/scss/',
  css: './content/css/',
  templates: './content/scss/templates/'
}

as your 'style' task references "paths.scss" and not "paths.sass"

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

``The issue concerning the preloading layer on the website``

My experience with the website www.wirecreation.net is sometimes marred by an issue during the initial load. It seems that there is a margin of a few pixels on the gray div containing the logo and progress bar at times, but other times it appears with zero ...

Ensuring a full height div using CSS

I have encountered an issue and created a fiddle to help illustrate it: http://jsfiddle.net/XJpGT/ The challenge I am facing is ensuring that the height of the green box always remains at 100%, while also making sure that the green and orange boxes do not ...

Create a table by incorporating the information from the page along with additional content

I need to extract the data from a list and convert it into a table, add some additional content that I will provide, and then align the table accordingly. While I can easily align elements and already have the list, I am facing difficulty in converting it ...

Adjust the dimensions of the icon

My current project involves creating a sidebar with icons and associated text to represent each icon. However, I encountered an issue while trying to adjust the size of the icons within the sidebar using the "useStyles()" method. For some reason, the size ...

Tips for aligning text in the middle of a customizable and adjustable button with the use of only Bootstrap 4

I am encountering an issue with button text alignment. After customizing the width and height of a button, I noticed that its text does not remain centered on certain screen sizes while in debugging mode. Html <!doctype html> <html lang="en> ...

Using varied colors to style list items

Is there a way to apply three different colors to my list items? What is the best method for achieving this? This is what I have in my code: li { width: 33.333%; float: left; padding: 15px; list-style: none; } .light { background-color: #0 ...

Replacing inline CSS with styled components in Next.js Sass modules

In order to display emoji icons in my Next.js App, I utilize the Twemoji library. These emojis are rendered as <span><img></span> elements in the final HTML output. To customize their default width and height, I use the !important rule in ...

adding content to div is becoming less speedy

Currently, I'm developing a drawing board using only html/css/jquery and the drawing functionality is working smoothly. The approach I've taken involves capturing the mousemove events and placing a dot (div) at each point where the event occurs, ...

Tips for ensuring a scrollbar remains at the bottom position

I'm facing an issue with a scroll-bar inside a div element. Initially, the position of the scroll-bar is at the top. However, whenever I add text to the div element, the scroll-bar remains in its initial position and does not automatically move to the ...

Tips for adjusting font size automatically to fit within its parent container every time

On my blog, the post titles are displayed in a div with a video playing in the background. The length of the title varies, ranging from 2 words to over 20 words. When the title is too long, it may overflow from its parent container where the video is playi ...

Top method for utilizing overlays

Is there a method to randomly select hex codes for specific colors? I want to replicate the design in this image through coding. Image Here is the code I have so far: HTML <div id="group"> <div class="sub red panel"> </div><!--su ...

I am trying to collapse the table header but I am having trouble doing so

@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100); @import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100); body { bac ...

When the user clicks on the body, I want the element to slide up, which will then slide down when the button is clicked

As a novice in Jquery, I am currently implementing a simple slide toggle on a button. Initially, the div is set to display none, and when the button is clicked, the slide toggle function is triggered. This works well. However, I also want the div to slide ...

Moving the layout container towards the left: a quick guide

I am currently attempting to display the legend contents in a horizontal alignment within the layout container. The issue is that while the layout containing the legend aligns horizontally as desired, it extends beyond the screen border. I do not want the ...

Focusing on the final (but not ultimate) elements within a specified tag

I am facing a challenge with an HTML structure containing multiple instances of a certain element along with two p elements beneath each: <some_tag></some_tag> <p></p> <p></p> <some_tag></some_tag> <p> ...

Show validation error messages for radio buttons alongside images in a single row

Within a div, I have placed three radio buttons with images inline. My goal is to show a validation message using bootstrap when the submit button is clicked and there is no user input. I attempted to add another div after the radio buttons with the class ...

Difficulty integrating custom CSS with Bootstrap framework

I attempted to incorporate a custom CSS file with my Bootstrap code, but unfortunately it does not seem to be functioning properly. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta htt ...

Most left-aligned icon on the left, most right-aligned icon on the right, and evenly spaced icons in between

Imagine a scenario where you are presented with a questionnaire that allows you to respond using a slider (HTML range element). Below the div containing the range selector (slider), I have arranged icons that need spacing. The icon on the far left should ...

"Having issues with Django not properly applying the JavaScript and CSS files I've linked in

I have completed my project and organized all the necessary files, including index.html, css, js, and settings.py within the appropriate folders. I am encountering an issue with applying a pen from the following source: CodePen index.html <!DOCTYPE h ...

jQuery UI smooths out the transitions, making the effect more gradual and fluid

Is there a way to make my toggle sidebar scroll smoothly using jQuery UI? Currently, it has a jerky behavior and I would like it to have a smoother left/right effect. I want the outer shell to slide smoothly just like the inner container does, instead of ...