Skip to main content

How to Resolve "gulp-sass 5 does not have a default Sass compiler" Error in JavaScript

The error gulp-sass 5 does not have a default Sass compiler; please set one yourself occurs because, starting with version 5, gulp-sass was decoupled from its underlying Sass compiler. Previously, a compiler was bundled in, but now you must explicitly install and provide one yourself.

This guide will explain what this change means and walk you through the simple, modern solution: installing the sass (Dart Sass) package and updating your gulpfile.js to use it.

The Core Problem: No Default Compiler in gulp-sass v5+​

The gulp-sass package is a wrapper that connects Gulp's streaming build system to a Sass compiler. In older versions, it came bundled with a default compiler. To make the tool more flexible and to separate concerns, the gulp-sass maintainers removed this dependency.

The error message is telling you that you must now choose and install your own Sass compiler. The two permitted options are:

  • node-sass: The older, C++-based compiler (now deprecated).
  • sass: The modern, primary implementation of Sass, also known as Dart Sass.

The Solution: Install sass and Update Your gulpfile.js​

The official and recommended solution is to use the sass (Dart Sass) package.

Step 1: Install the Necessary Packages​

Open your terminal in your project's root directory and run the following command to ensure you have both gulp-sass and sass installed as development dependencies.

# Using npm
npm install --save-dev sass gulp-sass

# Using yarn
yarn add --dev sass gulp-sass

Step 2: Update Your gulpfile.js​

The next step is to update how you import and initialize gulp-sass in your gulpfile.js. You must now "pass" your chosen Sass compiler (sass) to the gulp-sass function.

If you are using CommonJS (require): This is the most common syntax for Gulp files.

gulpfile.js
// gulpfile.js

const gulp = require('gulp');
// This is the key change: pass the `sass` compiler to `gulp-sass`
const sass = require('gulp-sass')(require('sass'));

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

If you are using ES Modules (import):

gulpfile.js
// gulpfile.js

import gulp from 'gulp';
import * as dartSass from 'sass'; // Import the sass compiler
import gulpSass from 'gulp-sass';

const sass = gulpSass(dartSass); // Pass the compiler to gulp-sass

// ... your Gulp tasks ...
note

After making these changes, run your Gulp task again. The error will be resolved.

While gulp-sass also permits the use of node-sass, you should always choose sass (Dart Sass) for new projects.

  • node-sass is deprecated. It will not receive new feature updates and will eventually stop receiving support. It also relies on native C++ bindings, which can be slow and brittle to install across different environments.
  • sass (Dart Sass) is the primary, official implementation of the Sass language. It is faster, easier to install, and is where all new language features are being added.

Troubleshooting: Clean Reinstall​

If you have followed the steps above and are still seeing the error, your node_modules directory might be in an inconsistent state, or you may have an old version of gulp-sass locked in your package-lock.json file.

Performing a clean reinstall of your project's dependencies often resolves these issues.

# 1. Delete old modules and lock files
rm -rf node_modules package-lock.json yarn.lock

# 2. (Optional but recommended) Clear the npm cache
npm cache clean --force

# 3. Reinstall all packages from scratch
npm install
note

After the installation is complete, try running your Gulp task again.

Conclusion​

The "gulp-sass 5 does not have a default Sass compiler" error is a simple configuration issue that requires you to be explicit about your choice of Sass compiler.

  • The standard solution is to install the sass package alongside gulp-sass.
  • You must then update your gulpfile.js to initialize gulp-sass with your chosen compiler, using the pattern: const sass = require('gulp-sass')(require('sass'));.
  • Always prefer the modern sass (Dart Sass) package over the deprecated node-sass.

Table of Contents