SCSS wouldn't re-compile or live reload when changed

support
1

Hugo version: Hugo Static Site Generator v0.76.5/extended darwin/amd64

Settings in config.toml

assetDir = "static"
[params]
    customSCSS = ["scss/custom.scss"]

In the <head></head> part,

    {{ range .Site.Params.customSCSS }}
      {{ if $.Site.IsServer }}
        {{ $cssOpts := (dict "enableSourceMap" true ) }}
        {{ $styles := resources.Get . | toCSS $cssOpts }}
        <link rel="stylesheet" href="{{ $styles.RelPermalink }}" media="screen" />
        {{ else }}
        {{ $styles := resources.Get . | toCSS | minify | fingerprint }}
        <link
          rel="stylesheet"
          href="{{ $styles.RelPermalink }}"
          integrity="{{ $styles.Data.Integrity }}"
          crossorigin="anonymous"
          media="screen"
        />
      {{ end }}
    {{ end }}

The problem is that whenever I make changes to my scss files then I need to stop and restart the hugo server
I tried with commands --disableFastRender / -w / -v / --gc. Nothing worked.
There are some related topics in discourse.gohugo.io, but none of them gave a final solution.

The only way I found it’s working is that place scss files under <project>/themes/assets/scss with those original scss files that comes with the theme.

Please help me, thanks!