SASS错误：未知的输出样式“紧凑”

Question

SASS找不到输出样式

compact
nested

这是我的代码：

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())
}

但是“压缩”效果很好
错误：

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

这是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"
  }
}

我使用这个webpack：https://github.com/budfy/Easy-webdev-startpack
我也无法理解代码更改后页面不自动重新加载。
我认为浏览器同步不起作用。
另外看看node js模块sass：

Answer 1

根据https://sass-lang.com/documentation/js-api/types/outputstyle/，sass下只支持两种输出样式。

compressed

和

expanded

。

在旧版本的 SASS 中，例如当您使用 node-sass 时，支持其他两个选项

nested

和

compact

。

gulp-sass

将（或曾经）默认使用node-sass，但是当您添加

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

它被转换为使用 dart-sass 语法。因此，您可以降级到

node-sass

（这是一个坏主意），或者将您的嵌套样式更改为受支持的样式之一。