Hugo detects css changes but output doesn't change

support
1

I’m building a web page using Hugo.

Here is my website header:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Website</title>
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0" /> -->
    <meta name="referrer" content="no-referrer" />
    <link rel="icon" href="/img/favicon.ico" type="image/x-icon" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/tiny-slider.css"
    />
    
    <!-- tried this as per suggestion from Hugo forums
    {{ $sassIncludes := (slice "node_modules" "assets/scss/vendor" "assets/scss/components") }}
    {{ $target := "styles/main.css" }}
    {{ if .Site.IsServer }}
        {{ $cssOpts := (dict "targetPath" $target "enableSourceMap" true "includePaths" $sassIncludes ) }}
        {{ $styles := resources.Get "/css/main.scss" | toCSS $cssOpts }}
        <link rel="stylesheet" href="{{ $styles.Permalink }}" media="screen">
    {{ else }}
        {{ $cssOpts := (dict "targetPath" $target "includePaths" $sassIncludes ) }}
        {{ $styles := resources.Get "/css/main.scss" | toCSS $cssOpts | postCSS | minify | fingerprint }}
        <link rel="stylesheet" href="{{ $styles.Permalink }}" integrity="{{ $styles.Data.Integrity }}" media="screen">
    {{ end }} -->

    {{ $style := resources.Get "/css/main.scss" | resources.ToCSS | minify | fingerprint}}

    <link rel="stylesheet" href="{{ $style.RelPermalink }}"/>
  </head>

  <body>
    <header>
      <div class="nav-bar">
        <a class="top-logo" href="/">
          <img src="/img/logo.svg" />
        </a>
    </header>
  </body>
</html>

Here is main.scss:

@import 'reset';
@import 'commonStyles';
@import 'pricing';
@import 'docs';
@import 'header';
@import 'footer';
@import 'home';

header {
  .nav-bar {
    background-color: red;
  }
}

config.toml:

baseURL = "http://example.org/"
languageCode = "en-us"
title = "Website"
assetDir = "static"

I’m running on macOS with hugo server command. I’m changing the background color in styles. Here is terminal output:

thatsme/../website-landing (master↑1|✚7…) % hugo server                                        
Building sites … WARN 2020/05/18 12:27:34 found no layout file for "HTML" for kind "taxonomyTerm": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN 2020/05/18 12:27:34 found no layout file for "HTML" for kind "taxonomyTerm": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.

                   | EN  
-------------------+-----
  Pages            | 14  
  Paginator pages  |  0  
  Non-page files   |  0  
  Static files     | 19  
  Processed images |  0  
  Aliases          |  0  
  Sitemaps         |  1  
  Cleaned          |  0  

Built in 17 ms
Watching for changes in /Users/thatsme/git/website-landing/{archetypes,content,data,layouts,static}
Watching for config changes in /Users/thatsme/git/website-landing/config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

Change of Static files detected, rebuilding site.
2020-05-18 12:27:42.202 +0200
Syncing css/main.scss to /

Styling changes apply only when I restart server. Html changes are getting applied properly.

2

Please provide a link to the source code repository for your project.