Fix the Error “gulp-sass 5 does not have a default Sass compiler; please set one yourself. Both the sass and node-sass packages are permitted”

Node.js is better known as a JavaScript runtime environment that is free, cross-platform as well as an open-source platform that runs on various operating systems. Programmers are allowed to execute JavaScript on the server. Node.js is quite popular among programmers and developers as they can create various programs using it as the back-end runtime environment of JavaScript. It is a well-accepted platform all over the world. When working with node, you may encounter various errors, and “gulp-sass 5 does not have a default Sass compiler; please set one yourself. Both the sass and node-sass packages are permitted” is one of those.

Though the error seems hard, it is not as complex as it looks. We will provide you with a few efficient options to get rid of the error warning. Let’s start with figuring out how you get the error

How do you get the error?

When you try to use sass and gulp-sass, you end up with the error warning. Look at the script you have used

var sass = require('gulp-sass')(require('sass'));

And the error that pops up

Error in plugin "gulp-sass"

Message:

gulp-sass 5 does not have a default Sass compiler; please set one yourself. 

Both the `sass` and `node-sass` packages are permitted.

For example, in your gulpfile:

Another possibility of the code you may have tried is:

import gulp from 'gulp';

import sass from 'gulp-sass';

import yargs from 'yargs';

const PRODUCTION = yargs.argv.prod;

export const styles = () => {

    return gulp.src('src/assets/scss/bundle.scss')

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

      .pipe(gulp.dest('dist/asset/css'));

}

That’s how you get in the error. Check out how to resolve it

Ways To Solve the Error “gulp-sass 5 does not have a default Sass compiler; please set one yourself. Both the sass and node-sass packages are permitted”

Option 1

To resolve the error, you need to install sass as it is required as the prerequisite to install gulp-sass. Have a look at the code

import pkg from 'gulp';
const { src, dest, series, watch } = pkg;
import concat from 'gulp-concat'

import dartSass from 'sass'
import gulpSass from 'gulp-sass'
const sass = gulpSass(dartSass)

function scss() {
    return src('app/scss/**/*.scss', { sourcemaps: true })
        .pipe(sass.sync().on('error', sass.logError)) // scss to css
        .pipe(concat('style.min.css'))
        .pipe(dest(config.build.style, { sourcemaps: '../sourcemaps/' }))
}

async function builds() { scss() }
export { builds }

Here, sass npm ‘npm install –save-dev sass is added to solve the error. It is then added to the variable of the second section of the error, and it is the one in the code ‘const sass = require(‘gulp-sass’)(require(‘sass’));’.

It resolves the error.

Option 2

Importing is really a savior when it comes to solving the error message. Check out the code you can simply implement

import dartSass from 'sass';

import gulpSass from 'gulp-sass';

const sass = gulpSass( dartSass );

Option 3

Another way to import rather than require it is a solution to fix the error. Have a look at the code

import gulpSass from "gulp-sass";

import nodeSass from "node-sass";

const sass = gulpSass(nodeSass);

Conclusion

In this post, we highlighted options to help you fix the error “gulp-sass 5 does not have a default Sass compiler; please set one yourself. Both the sass and node-sass packages are permitted” in an efficient way.

I hope you find it useful!