# SCSS template rendered only once, even for different parameters

**URL:** <https://discourse.gohugo.io/t/scss-template-rendered-only-once-even-for-different-parameters/43596>\
**Category:** support\
**Created:** [March 24, 2023, 5:50am UTC](https://discourse.gohugo.io/t/scss-template-rendered-only-once-even-for-different-parameters/43596 "2023-03-24T05:50:41Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![will](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/will/32/18403_2.png) [@will](https://discourse.gohugo.io/u/will)\
**Post date:** [March 24, 2023, 5:50am UTC](https://discourse.gohugo.io/t/scss-template-rendered-only-once-even-for-different-parameters/43596/1 "2023-03-24T05:50:41Z")

</div>

I have [`/assets/_paige/bootstrap/custom.scss`](https://github.com/willfaught/paige/blob/994524dbd9c4ce1c7a2ab691203541be8e4ba80c/assets/_paige/bootstrap/paige.scss):

```auto
$color-mode-type: media-query;
$primary: {{ .Param "paige.color" | default "#0d6efd" }};

@import "bootstrap";

```

I load it with resources.Get, execute it with resources.ExecuteAsTemplate, transpile it with toCSS, minimize it, fingerprint it, and refer to it in a \<link\> href attribute.

This all works fine in basic cases. If I don’t set paige.color in the site or page parameters, the color is the default #0d6efd. If I set it in the site parameters, the color is changed as you’d expect. However, if I set it in a page, it doesn’t work; it still uses the default color.

I’m guessing what’s happening is the template is rendering only once, for some reason, but I don’t understand why.

Here’s the code “stack” involved:

[links.html](https://github.com/willfaught/paige/blob/994524dbd9c4ce1c7a2ab691203541be8e4ba80c/layouts/partials/paige/links.html):

```auto
{{ partial "paige/link.html" (dict "href" "_paige/bootstrap/paige.scss" "page" $page "sass" true) }}

```

[link.html](https://github.com/willfaught/paige/blob/994524dbd9c4ce1c7a2ab691203541be8e4ba80c/layouts/partials/paige/link.html):

```auto
...
{{ with partial "paige/resource.html" (dict "page" $page "url" $href) }}
    {{ $resource := resources.ExecuteAsTemplate $href (or $page dict) . }}

    {{ if $sass }}
        {{ $resource = $resource | toCSS (dict "enableSourceMap" $enablesourcemap "includePaths" $includepaths "outputStyle" $outputstyle "transpiler" "dartsass") }}
    {{ end }}

    {{ $resource = $resource | minify | fingerprint }}
    {{ $href = $resource.RelPermalink }}
...

<link href="{{ $href | safeURL }}" ...>

```

[resource.html](https://github.com/willfaught/paige/blob/994524dbd9c4ce1c7a2ab691203541be8e4ba80c/layouts/partials/paige/resource.html):

```auto
{{ $params := . }}

...
{{ $url := $params.url }}

{{ $result := "" }}

...
        {{ with resources.Get $url }}
            {{ $result = . }}
        {{ end }}
...

{{ return $result }}

```

Has anyone attempted something like this?

Hugo:

```auto
❯ hugo env
hugo v0.111.3+extended darwin/amd64 BuildDate=unknown
GOOS="darwin"
GOARCH="amd64"
GOVERSION="go1.20.2"
github.com/sass/libsass="3.6.5"
github.com/webmproject/libwebp="v1.2.4"
github.com/sass/dart-sass-embedded/protocol="1.2.0"
github.com/sass/dart-sass-embedded/compiler="1.59.3"
github.com/sass/dart-sass-embedded/implementation="1.59.3"

```

---

<div class="post-metadata">

**Author:** ![pamubay](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/pamubay/32/17838_2.png) [@pamubay](https://discourse.gohugo.io/u/pamubay)\
**Post date:** [March 24, 2023, 8:13am UTC](https://discourse.gohugo.io/t/scss-template-rendered-only-once-even-for-different-parameters/43596/2 "2023-03-24T08:13:38Z")

</div>

`resources.ExecuteAsTemplate` output will be cached after its first execution, the `TARGET_PATH` is the cache key. You need to create unique target path for each `resources.ExecuteAsTemplate`.

* * *

`/layouts/partials/paige/links.html`:

```diff
...
{{ with partial "paige/resource.html" (dict "page" $page "url" $href) }}
++ {{ $s := path.Split $href }}
++ {{ $unique_target := path.Join $s.Dir (print now.UnixMicro "-" $s.File) }}
++ {{ $resource := resources.ExecuteAsTemplate $unique_target (or $page dict) . }}

    {{ if $sass }}
        {{ $resource = $resource | toCSS (dict "enableSourceMap" $enablesourcemap "includePaths" $includepaths "outputStyle" $outputstyle "transpiler" "dartsass") }}
    {{ end }}

    {{ $resource = $resource | minify | fingerprint }}
    {{ $href = $resource.RelPermalink }}
...

<link href="{{ $href | safeURL }}" ...>

```

---

<div class="post-metadata">

**Author:** ![will](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/will/32/18403_2.png) [@will](https://discourse.gohugo.io/u/will)\
**Post date:** [March 24, 2023, 8:14pm UTC](https://discourse.gohugo.io/t/scss-template-rendered-only-once-even-for-different-parameters/43596/3 "2023-03-24T20:14:41Z")

</div>

@pamubay Thanks for the tip. However, it doesn’t seem to have made a difference. I made these changes:

```diff
diff --git a/exampleSite/content/content/_index.md b/exampleSite/content/content/_index.md
index f291556..bb21671 100644
--- a/exampleSite/content/content/_index.md
+++ b/exampleSite/content/content/_index.md
@@ -1,4 +1,6 @@
 ---
 description: "Demonstrations of Paige content."
 title: "Content"
+paige:
+ color: "#00ff00"
 ---
diff --git a/exampleSite/content/content/markdown-syntax.md b/exampleSite/content/content/markdown-syntax.md
index bad8b4f..f6de377 100644
--- a/exampleSite/content/content/markdown-syntax.md
+++ b/exampleSite/content/content/markdown-syntax.md
@@ -5,6 +5,8 @@ description: "Sample article showcasing basic Markdown syntax and formatting for
 tags: ["markdown", "css", "html"]
 title: "Markdown Syntax Guide"
 weight: 10
+paige:
+ color: "#ff0000"
 ---
 
 <!--
diff --git a/layouts/partials/paige/link.html b/layouts/partials/paige/link.html
index 8a2cd55..6e7eb09 100644
--- a/layouts/partials/paige/link.html
+++ b/layouts/partials/paige/link.html
@@ -7,6 +7,7 @@
 {{ $page := $params.page }}
 {{ $referrerpolicy := $params.referrerpolicy | default "no-referrer" }}
 {{ $sass := $params.sass }}
+{{ $template := $params.template }}
 
 {{ $enablesourcemap := not hugo.IsProduction }}
 {{ $outputstyle := cond hugo.IsProduction "compressed" "" }}
@@ -16,7 +17,13 @@
 {{ end }}
 
 {{ with partial "paige/resource.html" (dict "page" $page "url" $href) }}
- {{ $resource := resources.ExecuteAsTemplate $href (or $page dict) . }}
+ {{ $resource := . }}
+
+ {{ if $template }}
+ {{ $split := path.Split $href }}
+ {{ $join := path.Join $split.Dir (print (sha1 $page) "-" $split.File) }}
+ {{ $resource = resources.ExecuteAsTemplate $join (or $page dict) . }}
+ {{ end }}
 
     {{ if $sass }}
         {{ $resource = $resource | toCSS (dict "enableSourceMap" $enablesourcemap "includePaths" $includepaths "outputStyle" $outputstyle "transpiler" "dartsass") }}
diff --git a/layouts/partials/paige/links.html b/layouts/partials/paige/links.html
index 75a3f12..615a11b 100644
--- a/layouts/partials/paige/links.html
+++ b/layouts/partials/paige/links.html
@@ -32,7 +32,7 @@
     <link href="{{ (resources.Get `site.webmanifest` | resources.ExecuteAsTemplate `site.webmanifest` .).RelPermalink | safeURL }}" rel="manifest">
 {{ end }}
 
-{{ partial "paige/link.html" (dict "href" "_paige/bootstrap/paige.scss" "page" $page "sass" true) }}
+{{ partial "paige/link.html" (dict "href" "_paige/bootstrap/paige.scss" "page" $page "sass" true "template" true) }}
 {{ partial "paige/link.html" (dict "href" "_paige/bootstrap-icons/bootstrap-icons.css") }}
 
 {{ if $page.Param "paige.math" }}

```

In `exampleSite/content/content/markdown-syntax.md`, I get:

```html
<link
crossorigin="anonymous"
href="/_paige/bootstrap/2960a7c403435ce12f3a980862c09d6dd481b2b3-paige.min.025067d2368225afecc4fb06b3f3c65d008049e909a7e7043a0f1d526107cb44.css"
integrity="sha256-AlBn0jaCJa/sxPsGs/PGXQCASekJp+cEOg8dUmEHy0Q="
referrerpolicy="no-referrer"
rel="stylesheet">

```

In `exampleSite/content/content/_index.md`, I get:

```html
<link
crossorigin="anonymous"
href="/_paige/bootstrap/06970610a97aaf425e5b11f2b963427a01cf047c-paige.min.025067d2368225afecc4fb06b3f3c65d008049e909a7e7043a0f1d526107cb44.css"
integrity="sha256-AlBn0jaCJa/sxPsGs/PGXQCASekJp+cEOg8dUmEHy0Q="
referrerpolicy="no-referrer"
rel="stylesheet">

```

The sha1 prefixes are different (2960a7c… vs. 069706…), which is expected, since the colors are different; but the fingerprints are the same (025067…), so the Bootstrap colors are still the same, and so are the contents.

---

<div class="post-metadata">

**Author:** ![pamubay](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/pamubay/32/17838_2.png) [@pamubay](https://discourse.gohugo.io/u/pamubay)\
**Post date:** [March 24, 2023, 9:42pm UTC](https://discourse.gohugo.io/t/scss-template-rendered-only-once-even-for-different-parameters/43596/4 "2023-03-24T21:42:35Z")

</div>

Does the `@import "bootstrap"` really works/resolved/imported here? because the `$primary` var only used in Sass/dartsass runtime and Hugo create fingerprint based on the compiled _css_.

```auto
$color-mode-type: media-query;
$primary: {{ .Param "paige.color" | default "#0d6efd" }};

@import "bootstrap";

```

---

<div class="post-metadata">

**Author:** ![will](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/will/32/18403_2.png) [@will](https://discourse.gohugo.io/u/will)\
**Post date:** [March 25, 2023, 12:07am UTC](https://discourse.gohugo.io/t/scss-template-rendered-only-once-even-for-different-parameters/43596/5 "2023-03-25T00:07:05Z")

</div>

@pamubay I’m not sure what you’re asking. The `sha1` hash is of the `$.page` value, so it should be different for each unique color value, which is in `$.page.Params.paige.color`. There’s another hash—a SHA-256 hash—that appears near the end of the file names, which is the result of the fingerprint function, which hashes the contents of the file after the SCSS transpilation…

The CSS, SCSS, and JS files in the Bootstrap NPM package are mounted to /assets/paige/bootstrap, so when dartsass runs, `@import "bootstrap"` imports bootstrap.scss from the bootstrap package.

---

<div class="post-metadata">

**Author:** ![will](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/will/32/18403_2.png) [@will](https://discourse.gohugo.io/u/will)\
**Post date:** [March 25, 2023, 1:51am UTC](https://discourse.gohugo.io/t/scss-template-rendered-only-once-even-for-different-parameters/43596/6 "2023-03-25T01:51:28Z")

</div>

Good news! That patch does indeed work. There must have been a build cache bug. I had to restart my computer, which killed hugo server. Restarting hugo server must have fixed it. @pamubay Thanks for your help!

---

<div class="post-metadata">

**Author:** ![system](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/system/32/1_2.png) [@system](https://discourse.gohugo.io/u/system)\
**Post date:** [March 27, 2023, 1:52am UTC](https://discourse.gohugo.io/t/scss-template-rendered-only-once-even-for-different-parameters/43596/7 "2023-03-27T01:52:12Z")

</div>

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.