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

JavaScript does not show an error message if a function is called but has not been defined

Currently, I am developing a nodejs/reactjs application that incorporates a cache system. During my development process, I encountered an interesting error where the data stored in the cache was not being displayed by the component. After thorough investig ...

javascriptnode.js

Is it possible to send requests to multiple APIs using a TypeScript event handler?

I'm facing a challenge in pinging multiple APIs within a single function. It seems like it should be possible, especially since each API shares the same headers and observable. I attempted to write a function for this purpose, but unfortunately, it do ...

javascriptangulartypescript

The Datejs library is experiencing issues following an upgrade to jQuery 3.x

I'm currently working on a node.js project that utilizes the Datejs library. However, after updating our local jQuery file from version 1.9.1 to 3.6.0, this library has stopped functioning properly. Here is a snippet of the code: var today = Date ...

javascriptjquerynode.jsnode-modulesdatejs

Tomcat hosting a dynamic duo: Spring Boot and React!

Exploring the world of Spring Boot application development with a React client using Gradle is an exciting journey for me as I navigate through these new technologies. My current progress includes successfully creating a WAR file that encompasses several i ...

javascriptspringreactjstomcatweb-deployment

Conceal a certain element in development using CSS

Is there a way to hide the footer section from my webpage without affecting the rest of the content? For example, using something like: "div class="poweredby" display: none", but I'm unsure of the correct method... Here is the spe ...

javascripthtmlcss

Change not accepted

I am a beginner in Angular and still grappling with the fundamentals. On my menu, I have a cart icon with an initial value of 0 upon first load. In my product list, each product has an 'AddToCart' button. What I aim to achieve is- I want to dy ...

javascriptjqueryangularjs

Issues arise when attempting to manipulate the DOM with ng-view in AngularJS

Apologies for not providing the code due to its length. I have a simple application with a single module, controller, and ng-view/routProvider. In my controller, when I use console.log(angular.element('div').length), it correctly shows that ther ...

javascriptjqueryhtmlangularjsdom

Adjust the size of an Angular component or directive based on the variable being passed in

I'm looking to customize the size of my spinner when loading data. Is it possible to have predefined sizes for the spinner? For example: <spinner small> would create a 50px x 50px spinner <spinner large> would create a 300px x 300p ...

javascripthtmlangulartypescript

What is the best way to retrieve multiple elements by class and change their innerHTML?

Encountering an issue with calling multiple elements of the same class using .innerhtml. Here is the URL I am dealing with: When running the following code in Chrome console, this is the output: document.getElementsByClassName('a-size-small a-color- ...

javascriptdom

"Successfully rendering the map on the initial load, but encountering an error of 'cannot map undefined'

Having trouble displaying data retrieved from an API. Initially, the movie titles are shown without any issues. However, upon refreshing the page, an error message stating "cannot map undefined" appears. Here is the code snippet: const [media, set ...

javascriptreactjsreact-hooksnext.js

What is the reason for the directive being available in $rootScope?

Currently, there doesn't seem to be a major issue but it has sparked my curiosity. I have a straightforward directive that, for some unknown reason, is accessible within $rootScope. JAVASCRIPT: (function(){ var app = angular.module('myAp ...

javascriptangularjsangularjs-directiveangular-ui-router

A guide to programmatically downloading a file with JavaScript on Internet Explorer

I'm currently facing a challenge with my web page. There is a button that, when clicked, should generate a CSV file (by converting from JSON) for the user to download. I've implemented the logic based on this jsfiddle, and it works perfectly in C ...

javascriptjqueryhtmlcsvinternet-explorer

What is the best way to reset the state to null when the input field is blank?

After setting some inputs with a state of null, I noticed that when the end-user types something and then deletes it all, the input reverts back to an empty string. How can I adjust the state so that it returns to null? I seem to be encountering an issue ...

javascriptreactjs

Google Analytics in Next.js Missing Page Title Configuration

I recently set up Google Analytics on my Next.js website, but I'm encountering a strange issue where the analytics are not detecting my webpages and showing as (not set). Everything else seems to be functioning properly. I've double-checked that ...

javascriptgoogle-analyticsnext.js

Detect Flash Player Event using Javascript

Is there a way to detect when a flash video ends without depending on user input like clicking the stop button? It's important to note: I HAVE NO CONTROL OVER THE PRESENTATIONS OR SWF FILES. My goal is to automate the client player object through s ...

javascriptflash

Is it possible to return a promise after utilizing .then() in AngularJS?

As someone who is still getting the hang of Angular and promises, I want to make sure I'm on the right track. Right now, my data layer service uses Restangular to fetch data and returns a promise. Here's how it looks... dataStore.getUsers = fun ...

javascriptangularjspromiserestangularangular-promise

Implementing Flash Messages with jQuery AJAX for Every Click Event

I've been working on integrating Ajax and PHP, successfully fetching data from the database. However, I'm facing an issue where the Ajax response is only displayed in the HTML for the first click. What I actually want is to show a "success/error" ...

javascriptphpjqueryajax

strategies for chaining together multiple observables with varying data types and operations

Hey everyone! I'm facing a situation where I have a form with multiple select types, and the options for these inputs are coming from an API. I then take the data emitted from the HTTP request observable and feed it into my FormGroup, and everything i ...

javascriptangulartypescript

What possible reason is causing ag grid to overlook the defaultExcelExportParams option that was provided?

Here is my React ag grid code snippet. I'm trying to implement the processCellCallback function, but unfortunately, I am not seeing the console.log output in the browser console when exporting excel. Any suggestions on what might be causing this issue ...

javascriptreactjsexcelag-grid

how to show an error in a modal window when encountering an error

Using Blazor and Blazorstrap, typically when the server disconnects, an "Error" message is displayed. However, with the BsModal from Blazorstrap, it appears in the background layer, making it unresponsive. How can this be fixed? Is it possible to close the ...

javascriptcssbootstrap-4blazor-server-side