javascript - gulp-jsbeautifier が SCSS を正しく美化できない

Question

ファイルの内容が変更された後、 Gulpプラグインgulp-jsbeautifierを使用して、プロジェクトのソース コードを自動的にフォーマットします。

このプラグインは、JavaScript のソース コードを思いどおりに完全にフォーマットすることができ、美しいです!

しかし、この機能を拡張して SCSS をフォーマットしようとすると、すべてが 1 行のファイルに変更されます。

これは SCSS入力の例です:

dg-login {

    height: 470px;
    width: 440px;
    border-radius: 15px;
    background-color: #001d40;
    background-image: radial-gradient(#28bae2, #001d40);
    display: block;

    & > div:not(#compatibleBrowsers) {
        padding: 48px;
        img {
            &#dglogo {
                margin: {
                    top: 20px;
                    bottom: 20px;
                }
            }
            width: 130px;
        }

        input {
            height: 40px;
        }
    }

    #compatibleBrowsers { 
        position : absolute;
        right: 70px;
        bottom: 30px;
    }
}

そして、それが「フォーマットされた」出力です：

dg-login { height: 470px; width: 440px; border-radius: 15px; background-color: #001d40; background-image: radial-gradient(#28bae2, #001d40); display: block; & > div:not(#compatibleBrowsers) { padding: 48px; img { &#dglogo { margin: { top: 20px; bottom: 20px; } } width: 130px; } input { height: 40px; } } #compatibleBrowsers { position : absolute; right: 70px; bottom: 30px; } }

残念ながら、私は SCSS ソース コードを最小化したくありません。最小化されますが、ソース コードのメンテナンスではなく、ビルドの後のステップで最小化されます。

これは私の.jsbeautifyrcファイルです:

{
  "html": {
    "allowed_file_extensions": ["htm", "html", "xhtml", "shtml", "xml", "svg"],
    "brace_style": "collapse",
    "end_with_newline": true,
    "indent_char": " ",
    "indent_handlebars": false,
    "indent_inner_html": true,
    "indent_scripts": "keep",
    "indent_size": 2,
    "max_preserve_newlines": 0,
    "preserve_newlines": true,
    "unformatted": ["a", "span", "img", "code", "pre", "sub", "sup", "em", "strong", "b", "i", "u", "strike", "big", "small", "pre", "h1", "h2", "h3", "h4", "h5", "h6"],
    "wrap_line_length": 0
  },
  "css": {
    "allowed_file_extensions": ["css", "scss", "sass", "less"],
    "end_with_newline": true,
    "indent_char": " ",
    "indent_size": 2,
    "selector_separator": " ",
    "selector_separator_newline": false
  },
    "allowed_file_extensions": ["js", "json", "jshintrc", "jsbeautifyrc"],
    "brace_style": "collapse",
    "break_chained_methods": false,
    "e4x": false,
    "end_with_newline": true,
    "indent_char": " ",
    "indent_level": 0,
    "indent_size": 2,
    "indent_with_tabs": false,
    "jslint_happy": false,
    "keep_array_indentation": false,
    "keep_function_indentation": false,
    "max_preserve_newlines": 0,
    "preserve_newlines": true,
    "space_after_anon_function": false,
    "space_before_conditional": true,
    "space_in_empty_paren": false,
    "space_in_paren": false,
    "unescape_strings": false,
    "wrap_line_length": 0
  }
}

そして最後に、gulpfile.jsで定義されたウォッチ:

gulp.watch([
     'app/' + project.jsSrcFolder + '/**/*.js',
     'app/' + project.scssSrcFolder + '/**/*.scss'
   ], function(event) {
    if (event.type === 'changed') {
      gulp.src(event.path)
        .pipe(prettify({config: '.jsbeautifyrc', mode: 'VERIFY_AND_WRITE'}))
        .pipe(gulp.dest(event.path.substring(0, event.path.lastIndexOf('/'))));
    }
  });

"css"で定義されたルールがファイル.jsbeautifyrcに適用されていないように見えますが、私の側で設定ミスが発生している可能性があります。SCSS何か助けはありますか？