在 nextjs 中调试 SCSS答案

【问题标题】：Debug SCSS in nextjs在 nextjs 中调试 SCSS
【发布时间】：2022-12-15 05:05:32
【问题描述】：

我想在 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);
    }
  }

【问题讨论】：

标签： css debugging sass next.js

【解决方案1】：

您可以看到文件不断变化以使用 sass 对其进行编译，因此调试信息将显示在单独的窗口中。

如果您使用的是 macOS，fswatch 可以正常工作：

fswatch -o styles/globals.sass | sass styles/globals.sass styles/globals.css

【讨论】：