在 nextjs 中调试 SCSS

Question

我想在 NEXT.JS 中调试一些 SCSS，但我不能。我对此进行了一些研究，但找不到任何解决方案。当我在 SCSS 模块上使用 @debug 时，我不会在控制台中得到输出。我必须在 next.config.js 中激活某些内容吗？还是无法在 NEXT.JS 中调试 SCSS？

  .mainImageFragment {
    $floatingFragments: ((translate(-5em, -4em), 33deg),
      (translate(1.75em, -8em), -80deg),
      (translate(-5em, -1em), -25deg),
      (translate(1.5em, -5em), 30deg),
      (translate(5em, -7em), -70deg),
      (translate(5em, 1em), 200deg),
      (translate(-7em, 0.5em), 170deg),
      (translate(-5em, -3em), -5deg),
      (translate(2em, -2.8em), 10deg));
    @debug 'hello sass';

    @for $i from 1 to length($floatingFragments) {
      $fragment: nth($floatingFragments, $i);
      $translate: nth($fragment, 1);
      $rotate: nth($fragment, 2);

      @debug 'hello sass';

      @include floatingFragment($i, $translate, $rotate);
    }
  }

Answer 1

您可以观察文件的变化以不断编译它，sass以便调试信息将显示在单独的窗口中。

sass具有内置手表：

sass -w styles/global.sass styles/global.css