Debug SCSS in nextjs

Question

I want to debug some SCSS in NEXT.JS but I can't. I made some research for it but I couldn't find any solution. When I use @debug on a SCSS-module then I won't get an output in the console. Must I activate something in the next.config.js or isn't it possible to debug SCSS in NEXT.JS?

  .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);
    }
  }

Schauer

Answer 1

You can watch the file changing to constantly compile it with sass so debug info will be shown in a separate window.

sass has built-in watch:

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

Volding

Answer 2

I found it surprising that it doesn't work out of the box, but I had to add to my next.config.js (Next 13+):

...
sassOptions: {
    logger: {
        warn: function (message) {
            console.warn(message)
        },
        debug: function (message) {
            console.log(message)
        }
    }
}
...

Then I can use @debug and @warn as I normally would, globally and in the same console as Next.js.

Per spec: https://github.com/sass/sass/blob/77723cb88e6571f1b42d1fb322980ef78002e96f/js-api-doc/options.d.ts#L244-L256

Though keep in mind that Next/webpack is generally only recompiling the SCSS when it needs to, so the debug statements won't always be called unless you force the CSS output to regenerate.

Grati