SASS Error: Unknown output style "compact"

Question

SASS can't find output style

compact
nested

This is my code:

const {
  src,
  dest
} = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const bulk = require('gulp-sass-bulk-importer');
const prefixer = require('gulp-autoprefixer');
const clean = require('gulp-clean-css');
const concat = require('gulp-concat');
const map = require('gulp-sourcemaps');
const bs = require('browser-sync');

module.exports = function style() {
  return src('src/scss/**/*.scss')
    .pipe(map.init())
    .pipe(bulk())
    .pipe(sass({
      outputStyle: "compact"
    }).on('error', sass.logError))
    .pipe(prefixer({
      overrideBrowserslist: ['last 8 versions'],
      browsers: [
        'Android >= 4',
        'Chrome >= 20',
        'Firefox >= 24',
        'Explorer >= 11',
        'iOS >= 6',
        'Opera >= 12',
        'Safari >= 6',
      ],
    }))
    .pipe(clean({
      level: 2
    }))
    .pipe(concat('style.css'))
    .pipe(map.write('../sourcemaps/'))
    .pipe(dest('build/css/'))
    .pipe(bs.stream())
}

But "compressed" works perfectly
Error:

Error in plugin "sass"
Message:
    src\scss\style.scss
Error: Error: Unknown output style "compact".

This is package.json:

{
  "name": "easy-webdev-startpack",
  "version": "3.1.1",
  "description": "HTML5+CSS3 template for easy start website project'",
  "main": "gulpfile.js",
  "scripts": {
    "html": "gulp",
    "start": "gulp",
    "php": "gulp dev_php",
    "build": "gulp libs_style && gulp svg_css && gulp ttf && gulp fonts && gulp style && gulp libs_js && gulp build_js && gulp rastr && gulp webp && gulp svg_sprite && gulp html && gulp php",
    "ftp": "gulp deploy",
    "build-ftp": "npm run build && npm run ftp"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.14.2",
    "@babel/preset-env": "^7.14.2",
    "browser-sync": "^2.26.14",
    "chalk": "^4.1.1",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^8.0.0",
    "gulp-babel": "^8.0.0",
    "gulp-changed": "^4.0.2",
    "gulp-clean-css": "^4.3.0",
    "gulp-concat": "^2.6.1",
    "gulp-file-include": "^2.3.0",
    "gulp-imagemin": "^7.1.0",
    "gulp-multi-dest": "^1.3.7",
    "gulp-plumber": "^1.2.1",
    "gulp-sass": "^5.1.0",
    "gulp-sass-bulk-importer": "^3.0.1",
    "gulp-sourcemaps": "^3.0.0",
    "gulp-svg-css-pseudo": "^1.0.4",
    "gulp-svg-sprite": "^1.5.0",
    "gulp-svgmin": "^3.0.0",
    "gulp-ttf2woff": "^1.1.1",
    "gulp-ttftowoff2": "^1.0.1",
    "gulp-uglify-es": "^2.0.0",
    "gulp-webp": "^4.0.1",
    "imagemin-jpeg-recompress": "^7.0.0",
    "imagemin-pngquant": "^9.0.2",
    "require-dir": "^1.2.0",
    "vinyl-ftp": "^0.6.1"
  },
  "dependencies": {
    "sass": "^1.56.0"
  }
}

I use this webpack: https://github.com/budfy/Easy-webdev-startpack
I can't understand also page not autoreloading after code changes.
Browser sync not working I think.
Also look at node js module sass:

Answer 1

According to https://sass-lang.com/documentation/js-api/types/outputstyle/ there are only two output styles supported under sass. compressed and expanded.

In older versions of SASS, such as when you're using node-sass, the other two options nested and compact were supported.

gulp-sass will (or it used to) default to using node-sass, but when you added the

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

it was transformed into using the dart-sass syntax. So you can either downgrade to node-sass which is a bad idea, or change your nesting style to one of the supported ones.