Gulp Watch fails to identify changes in the SASS SCSS directory

After setting up Gulp to compile SCSS into CSS using NanoCSS and gulp-css for the first time, I encountered an issue. While my do-sass command successfully compiles SCSS and minifies CSS files, it does not run when placed within a watch task. Any changes made to SCSS files do not trigger the execution of the do-sass command. Can someone please advise on what might be causing this inconsistency?

const gulp = require('gulp');
const sass = require('gulp-sass');
const cssnano = require('gulp-cssnano');

gulp.task('sass', function(){
  return gulp.src('scss/styles.scss')
    .pipe(sass())
    .pipe(gulp.dest('./'))
});

// Minify .css files and reload browser.
gulp.task('mini-css', function() {
    return gulp.src('styles.css')
    .pipe(cssnano())
    .pipe(gulp.dest('./'));
});

// Compile and minify css files.
gulp.task('do-sass', gulp.series('sass', 'mini-css'));


gulp.task('watch', function(){
  gulp.watch('scss/**/*.scss', gulp.series('do-sass')); 
});

Answer №1

The pattern you've specified for your watch task may be incorrect. Using scss/*/.scss will not target the SCSS files you intend to watch for. Instead, it will search for files named .scss without any actual filename included.

To successfully target all SCSS files at any level of nesting, you should utilize the double-star syntax. This wildcard character allows you to match any directory levels:

scss/**/*.scss

To ensure your watch task functions correctly, update it as follows:

gulp.task('watch', function(){
  gulp.watch('scss/**/*.scss', gulp.series('do-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

Having trouble with jQuery's 'OR' not functioning properly when iterating through mandatory input elements

In the process of creating a fallback for required HTML5 attributes for different input types, I encountered an issue with checking the ':checked' status of radio buttons and using the 'OR' || operator within the loop: if (self.val() = ...

Using JavaScript to generate dynamic folders in Alfresco is not functioning as expected

Working with Alfresco 4.0.d community edition (also tested on Alfresco 4.0.c) on an Oracle Linux 64-bit virtual machine using Firefox. I've been developing a script to dynamically create sub-folders as new items are added to a space/folder via a rule ...

Why are JavaScript errors constantly popping up when I use Django Pipeline?

After configuring Django Pipeline (version 1.3.15) for a specific group of JS files, I ensured they were in the correct order based on their appearance on my page. The collectstatic process went smoothly and when viewing the source, it looked like all th ...

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 ...

Issue with jQuery DataTable: Unable to use column-level filters at the top and maintain a fixed height simultaneously

I am having an issue displaying data in a jQuery DataTable with a column level filter at the top, fixed height, and scroller enabled. Initially, I was able to display the column level filter at the top and it was functioning properly. However, when I set t ...

Nestjs crashes with "terminated" on an Amazon EC2 instance

https://i.stack.imgur.com/3GSft.jpgMy application abruptly terminates with the error message "killed" without providing any additional information or stack trace. Interestingly, it functions properly when run locally. Any assistance would be greatly appr ...

Is NextJS on-demand revalidation compatible with Next/link?

https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration#on-demand-revalidation According to the NextJS documentation, it appears that on-demand cache revalidation should function properly with regular <a> tags and when t ...

"Enhancing User Experience with AngularJS by Dynamically Modifying and Refresh

I'm currently attempting to dynamically add HTML elements using JavaScript with a directive: document.getElementsByClassName("day-grid")[0].innerHTML = "<div ng-uc-day-event></div>"; or var ele = document.createElement("div"); ele.setAttr ...

What causes useEffect to trigger twice when an extra condition is included?

Attempting to create a countdown timer, but encountering an interesting issue... This code triggers twice in a row, causing the useEffect function to run twice per second. 'use client' import {useState, useEffect, useRef} from 'react' ...

Code Wizard

I am currently working on a project to develop an HTML editor. How it Needs to Function Elements Inside: Text Area - Used for typing HTML as text Iframe - Displays the typed HTML as real [renders string HTML to UI] Various Buttons Functionality: When ...

Is there a way to delay rendering the html until all the content has been fully downloaded?

Whenever I visit my webpage, I notice that the content starts loading without the animation applied to it. It seems like the CSS hasn't finished downloading yet. To solve this issue, I added a preloading bar overlay to signal that the content is still ...

Error encountered while executing a join query in Node.js

My stack includes express.js, sequelize, and mysql Database Structure A : { id: 1, name: ... } B : { A_id: 1, name: name1 }, { A_id: 1, name: name2 } A Model (models/A.js) A.association = models => { A.hasMany(models.B, { foreignKey: 'A_id&ap ...

What is the best way to retrieve the value from a textfield in one module and use it in a

How can I access the value of a textField in another module within React.js without importing the entire textfield component? What is the most effective approach to get access to the value variable in a different module? Below is a sample functional textF ...

concerning the installation of the Angular plugin via NPM or bower

Forgive me for asking a basic question, but I am new to NPM and bower. I came across a hint to install a library based on angularjs. Take a look at the code below: npm install --save angularjs-gauge bower install --save angularjs-gauge I'm curious ...

Even after being removed, the input field in Firefox stubbornly maintains a red border

I have a project in progress that requires users to input data on a modal view and save it. The validation process highlights any errors with the following CSS snippet: .erroreEvidenziato { border: 1px solid red; } Here is the HTML code for the moda ...

Struggles with fading in and out

I'm currently working on enhancing a pure CSS rollover with a smooth transition/fade effect, but I'm encountering some difficulties in achieving the desired outcome. The concept involves displaying a new div called "online-hover" when hovering o ...

Encountering an issue with Invariant Violation when attempting to retrieve a frame that is outside of the specified

I have created a VenueList component for my React Native app. I want to utilize the FlatList component to display a list of venues, but I keep encountering an error message that says "Invariant Violation tried to get frame out of range index" (refer to the ...

Loop through an array of buttons using an event listener

My HTML and Javascript code currently have the functionality to show/hide a row of 3 images upon button click. However, I need this feature to work for two additional rows similar to this one. I believe it involves looping through an array of buttons, but ...

Sending a JavaScript string to a PHP script from a Chrome extension content script

I am currently developing a chrome extension that is designed to extract text data from specific websites when I visit them, and then store this data in a SQL database. The JavaScript code for data extraction is functioning correctly and is able to capture ...

Displaying Child Component in Parent Component After Click Event on Another Child Component: How to Implement Angular Parent/Children Click Events

After delving into Angular 7 for a few weeks, I find myself faced with the challenge of toggling the visibility of a child component called <app-child-2> within a Parent component named <parent>. This toggle action needs to be triggered by a cl ...