jhipster 在文件写入阶段用尾随逗号格式化 scss 文件

Question

我的模板 (themes.scss.ejs) 文件具有以下内容（带格式），

body.light,
body .light {
    $base-light-theme: mat.define-light-theme((
        color: ($palettes)
    ));

但是生成的文件如下所示，

body.light,
body .light {
    $base-light-theme: mat.define-light-theme(
        (
            color: (
                $palettes,
            ),
        )
    );

**查看如何添加尾随逗号。这导致构建失败并出现以下错误，

./src/@fuse/styles/themes.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/@fuse/styles/themes.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: $map: ((primary: (50: var(--fuse-primary-50), 100: var(--fuse-primary-100), 200: var(--fuse-primary-200), 300: var(--fuse-primary-300), 400: var(--fuse-primary-400), 500: var(--fuse-primary-500), 600: var(--fuse-primary-600), 700: var(--fuse-primary-700), 800: var(--fuse-primary-800), 900: var(--fuse-primary-900), contrast: (50: var(--fuse-on-primary-50), 100: var(--fuse-on-primary-100), 200: var(--fuse-on-primary-200), 300: var(--fuse-on-primary-300), 400: var(--fuse-on-primary-400), 500: var(--fuse-on-primary-500), 600: var(--fuse-on-primary-600), 700: var(--fuse-on-primary-700), 800: var(--fuse-on-primary-800), 900: var(--fuse-on-primary-900)), default: var(--fuse-primary), lighter: var(--fuse-primary-100), darker: var(--fuse-primary-700), text: var(--fuse-primary), default-contrast: var(--fuse-on-primary), lighter-contrast: var(--fuse-on-primary-100), darker-contrast: var(--fuse-on-primary-700)), accent: (50: var(--fuse-accent-50), 100: var(--fuse-accent-100), 200: var(--fuse-accent-200), 300: var(--fuse-accent-300), 400: var(--fuse-accent-400), 500: var(--fuse-accent-500), 600: var(--fuse-accent-600), 700: var(--fuse-accent-700), 800: var(--fuse-accent-800), 900: var(--fuse-accent-900), contrast: (50: var(--fuse-on-accent-50), 100: var(--fuse-on-accent-100), 200: var(--fuse-on-accent-200), 300: var(--fuse-on-accent-300), 400: var(--fuse-on-accent-400), 500: var(--fuse-on-accent-500), 600: var(--fuse-on-accent-600), 700: var(--fuse-on-accent-700), 800: var(--fuse-on-accent-800), 900: var(--fuse-on-accent-900)), default: var(--fuse-accent), lighter: var(--fuse-accent-100), darker: var(--fuse-accent-700), text: var(--fuse-accent), default-contrast: var(--fuse-on-accent), lighter-contrast: var(--fuse-on-accent-100), darker-contrast: var(--fuse-on-accent-700)), warn: (50: var(--fuse-warn-50), 100: var(--fuse-warn-100), 200: var(--fuse-warn-200), 300: var(--fuse-warn-300), 400: var(--fuse-warn-400), 500: var(--fuse-warn-500), 600: var(--fuse-warn-600), 700: var(--fuse-warn-700), 800: var(--fuse-warn-800), 900: var(--fuse-warn-900), contrast: (50: var(--fuse-on-warn-50), 100: var(--fuse-on-warn-100), 200: var(--fuse-on-warn-200), 300: var(--fuse-on-warn-300), 400: var(--fuse-on-warn-400), 500: var(--fuse-on-warn-500), 600: var(--fuse-on-warn-600), 700: var(--fuse-on-warn-700), 800: var(--fuse-on-warn-800), 900: var(--fuse-on-warn-900)), default: var(--fuse-warn), lighter: var(--fuse-warn-100), darker: var(--fuse-warn-700), text: var(--fuse-warn), default-contrast: var(--fuse-on-warn), lighter-contrast: var(--fuse-on-warn-100), darker-contrast: var(--fuse-on-warn-700))),) is not a map.
    ╷
181 │     $primary: map.get($color-settings, primary);
    │               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
  node_modules/@angular/material/core/theming/_theming.scss 181:15  define-light-theme()
  src/@fuse/styles/themes.scss 73:22                                root stylesheet

我正在使用 generator-base.js 中的 writeFilesToDisk(files, generator = this, returnFiles = false, rootTemplatesPath) 方法然后调用 generator-base-private.js 中的 template(source, destination, generator, options = {}, context)。

我检查了这个方法中的响应 (res)，

jhipsterUtils
      .renderContent(source, _this, _context, options)
      .then(res => {
           _this.fs.write(customDestination, res);
            return customDestination;
       })

并且原始内容没有任何尾随逗号。所以，看起来 _this.fs.write 方法正在格式化 + 添加尾随逗号。

是否可以选择不让 yomans fs 模块完成格式化。我查看了代码库并搜索了 yomans 文档，但找不到任何内容。

非常感谢任何帮助...

注意：我从生成的代码中手动删除了多余的逗号，一切正常。

2022 年 4 月 4 日更新： 不确定这种格式化是默认情况下由 ejs 完成的，还是 jhipster 提供给它的选项之一（tro yoman 生成器）导致了这种情况。所以创建了一个纯 yoman 生成器，并且不会在那里发生这种重新格式化。所以这证明 jhipster 对 yoman 的 fs/ejs 的选项导致了这种格式。

Answer 1

好的，我知道发生了什么，我想我可以回答我自己的问题以帮助将来的人...

在命令中添加 --skip-prettier 基本上跳过了格式化部分，并且能够在不受 prettier 影响的情况下获得与源 *.ejs 文件完全相同的格式。

在/generators/bootstrap/index.js中，_commitSharedFs 方法构建了具有不同转换器数组的转换对象，其中一个是更漂亮的。添加上面的命令基本上会跳过数组中更漂亮的转换器，

const transformStreams = [
      // multi-step changes the file path, should be executed earlier in the pipeline
      new MultiStepTransform(),
      ...(skipYoResolve ? [] : [createApplyYoResolveTransform(this.env.conflicter)]),
      createForceYoRcTransform(),
      createForceWriteConfigFiles(),
      ...(withGeneratedFlag ? [generatedAnnotationTransform(this)] : []),
      ...(skipPrettier ? [] : [createApplyPrettierTransform()]),
      createConflicterCheckTransform(this.env.conflicter, conflicterStatus),
      createConflicterStatusTransform(),
    ];

如果您不想跳过整个格式，您可以创建一个 .prettierignore 配置，其中跳过此文件，您将得到相同的结果。

jhipster 在文件写入阶段用尾随逗号格式化 scss 文件

jhipster formatting scss files with trailing commas during file writing phase

jhipster