Gulp is failing to convert SCSS files into CSS

I'm having trouble getting gulp to compile my SASS code into CSS automatically. What could be the issue?

file structure:

public
-css
--styles.css
-index.html
sass
-styles.scss
gulpfile.js
package.json

Gulpfile:

var gulp = require('gulp'),
    browserSync = require('browser-sync').create(),
    sass = require('gulp-sass');

  gulp.task('serve', function() { browserSync.init({ server: "./public" });

  gulp.watch("scss/**/*.scss", ['sass']);
  gulp.watch("public/*.html").on('change', browserSync.reload);

});

gulp.task('sass', function() {
return gulp.src("scss/styles.scss")
  .pipe(sass().on('error', sass.logError))
  .pipe(gulp.dest("public/css/styles.css"))
  .pipe(browserSync.stream());
});

gulp.task('default', ['sass', 'serve']);

Package.json:

{
  "name": "gulptest",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "dependencies": {
    "autoprefixer": "^9.3.1",
    "browser-sync": "^2.26.3",
    "cssnano": "^4.1.7",
    "gulp-postcss": "^8.0.0",
    "gulp": "^3.9.1",
    "gulp-sourcemaps": "^2.6.4"
  },
  "devDependencies": {
    "gulp-sass": "^4.0.2"
  },
  "scripts": {
    "dev": "gulp"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
javascriptnpmgulp

Answer №1

It appears there are two main issues that need to be addressed:

According to @cale_b, you are currently monitoring the incorrect directory and your source in the sass task is also incorrect. To rectify this problem, make the following adjustments:

gulp.task('serve', function() { browserSync.init({ server: "./public" });

  //gulp.watch("scss/**/*.scss", ['sass']);
  gulp.watch("sass/**/*.scss", ['sass']);

  gulp.watch("public/*.html").on('change', browserSync.reload);  
});

gulp.task('sass', function() {

  //return gulp.src("scss/styles.scss")
  return gulp.src("sass/styles.scss")

   .pipe(sass().on('error', sass.logError))

   //Ensure that dest specifies directories only, not file names
   //After compiling, sass will generate styles.css automatically
   .pipe(gulp.dest("public/css"))

   .pipe(browserSync.stream());
});

Answer №2

Here is the gulp sass setup I use for my projects:

gulp.task('compileSass', function() {
  gulp.src('styles/*.scss')
          .pipe(sass())
          .pipe(gulp.dest('dist/css/'));
});
gulp.task('watchChanges', function(){
  gulp.watch(['styles/*.scss'], ['compileSass']);
});

Although it may have some redundancies in the source, it gets the job done effectively.

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 AjaxPoller object is not defined and causing a TypeError

I have a piece of JavaScript code that handles AJAX requests and updates the DOM: this.AjaxHandler = { sendRequest: sendRequest, fetchDataForElement: fetchDataForElement, handleJsonResponse: handleJsonResponse, checkProgress: checkProgress }; fun ...

javascriptjquery

Access previous value in Vuejs onchange event

In the code snippet below, how can I retrieve the previous value of the model that has been changed, specifically the age in vuejs? var app = new Vue({ el:"#table1", data:{ items:[{name:'long name One',age:21},{name:'long name Two&a ...

javascriptjqueryvuejs2vue.js

Guidelines for utilizing basepath for specific pages in NextJS

I'm currently working on a NextJS application using version 13 and I have a question regarding setting the basepath for specific pages only. For example: "/auth/*" --> should not display the basepath "/remaining-pages" --& ...

javascriptreactjsnext.js

Insert title into PDF document

I am currently working on a react application that generates PDF documents easily. The libraries I have utilized are: jspdf html2canvas Below is the code snippet that demonstrates my approach: index.js: <div className="App"> < ...

javascripthtmlreactjspdfjspdf

Using a for loop, how can the property value be set in another object?

One challenge that I am facing is setting object property values. The object in question looks like this: const newPlan = { name: '', description: '', number: '', monday: { breakfast: '', ...

javascripthtmlobjectfor-loopdom

How can you dynamically change the value of a React datetime slider picker using code?

I can't figure out how to programmatically update the value of the React datetime slider picker, especially when I click on a button. The rendering code for the widget looks like this: <RDSPwidget enableSecond={true} /> This is how my ...

javascriptreactjsdatetime

SVG: Altering the dy attribute has no impact on the overall height of the bounding rectangle for the parent text

We are striving to align a group of tspan elements both vertically and horizontally. However, the parent container is not taking into consideration dy values. This lack of consideration is leading to alignment issues. If you adjust the dy values in this ...

javascripthtmlsvg

executing ajax request to call a function, encountering partial success and encountering partial failure

Apologies for the lack of clarity in the title. I currently have a search engine that utilizes an ajax function. At present, when I type "t" in the search box, only the tags containing the word "t" are displayed (for example, if I type "t", then "test" sho ...

javascriptjquerypythonajaxdjango

The double click feature is not functioning properly when used in conjunction with the selectpicker Boostrap

<select class= "selectpicker" id="cus_id"> <option value="654" >test1</option> <option value="6877" >test2</option> <option value="8687" >test3</option> </select ...

javascriptjquery

This jQuery ajax request is returning a readyState of 1 or an incorrect data type

I am currently troubleshooting an issue with the ajax response in my Wordpress plugin script. Whenever I try to retrieve a json file using jQuery.ajax, I receive {readyState: 1} as the result. Even when setting async: false, the response is always plain te ...

javascriptjqueryajaxjsonwordpress

Encountered an issue while attempting to launch the express

I've encountered an error while attempting to launch my express server, and despite my best efforts, I can't seem to figure out the cause. It was operational for a period of time before suddenly ceasing function, though I'm unable to pinpoin ...

node.jsexpressmongoosenpm

Different kinds of garbage collection operations in NodeJS

When utilizing the perf_hooks module in NodeJS, we have access to information regarding garbage collection. This can be achieved by using PerformanceObserver, which is triggered with each garbage collect event. const obs = new perf_hooks.Performanc ...

javascriptnode.jsv8

How to eliminate a hyperlink from an HTML element with the help of JQuery

Recently, I was assigned to revamp a website for the company I work for. However, upon closer inspection, I realized that the website is quite messy and relies heavily on templates, resulting in certain elements being auto-generated as active links. The i ...

javascriptjqueryhtmlcss

Angular JavaScript does not take effect on elements inserted into ui-view

When transferring the code from main.html to index.html, the javascript functions smoothly. The click function successfully triggers the ripple effect. Link: Ripple Click Effect Google Material Design However, upon extracting the code to main.html and in ...

javascriptjqueryangularjsuiview

What is the best way to split an input field into distinct fields for display on the screen?

Take a look at this image: https://i.stack.imgur.com/LoVqe.png I am interested in creating a design similar to the one shown in the image, where a 4 digit one-time password (OTP) is entered by the user. Currently, I have achieved this by using 4 separate ...

javascripthtmlcsstwitter-bootstrap

Ways to add elements to the DOM using jQuery from the local storage?

I'm facing a challenge where I have an input field and store the inputs in local storage. When I click on 'add', I want to immediately append the new inputs to my ul element. However, simply appending the current input won't work as it ...

javascriptjqueryappendlocal-storage

Implement a transition effect for when elements change size using the `.resizable().css` method

I attempted to incorporate a deceleration effect when resizing an element back to its original size using the resizable method. The slowdown effect should only trigger during the click event (when the "Click-me" button is pressed), not while manipulating ...

javascripthtmljquerycss

Interactive chat feature with live updates utilizing jQuery's $.Ajax feature for desktop users

I came across a script for real-time chat using $.ajax jQuery, but it only refreshes my messages. Here's an example scenario: I type: Hello to You, and I see this message refreshed. You reply: Hey, in order to see your message, I have to manually refr ...

javascriptphpjqueryajaxchat

Troubleshooting AngularJS: Directive unable to access controller's variable within scope

I am facing a challenge with an element that has both a controller and a directive featuring an isolate scope: scope: { dirVar: '= ' } My objective is to execute specific parts of the directive only when a certain variable is true. I am try ...

javascriptangularjs

What would be the ideal alternative if the Google Ajax API is unavailable, given that Google does not allow for local installation?

On my website, I include the following script: ... <script type="text/javascript" src="https://www.google.com/jsapi"></script> ... This particular script is from Google and is used to dynamically load other resources, such as the Google Chart ...

javascriptajax