Issue when trying to only load page-specific SCSS stylesheets

support
1

Hi everyone! We are trying to move our site away from loading all styles regardless of page. Instead, we want to load the site-wide styles, along with any page-or-directory-specific stylesheets, concat them all together, and then convert that result into the final CSS file output.

The odd issue I’m running into involves when the addition of a second stylesheet does or does not work.

With the following method, everything works fine:

{{ $options := (dict "targetPath" "style.css" "outputStyle" "compressed" "enableSourceMap" true) }}

{{/* Include all site-wide styles */}}
{{ $styles := slice (resources.Get "scss/app.scss") }}

{{/* Add directory-specific styles by checking page's parent folder */}}
{{ $styles = $styles | append (resources.Get "scss/pages/_blog.scss") }}

{{/* Compile all into one stylesheet and convert from SCSS to CSS */}}
{{ $styleoutput := $styles | resources.Concat "scss/styles.scss" | resources.ToCSS $options }}

<link type="text/css" href="{{ $styleoutput.RelPermalink }}" rel="stylesheet">

But when I conditionally add the blog SCSS file like so:

{{ if in .Dir "company/blog/" }}
    {{ $styles = $styles | append (resources.Get "scss/pages/_blog.scss") }}
{{ end }}

Then the slice after this, when printed, still shows both SCSS files in it, but the second one does not load properly on the webpage. I guess it doesn’t concatenate to app.scss properly or at all.

I made sure this wasn’t a variable context issue by replacing the variable “$styles” with a Scratch field instead, but all tests resulted the same way. Interestingly, when I put it in an “if” statement simply written as:

{{ if true }}

Then it worked, but any if statement or range checking a page variable, site variable, parameter, hugo variable, etc. broke the code.

The goal is to have some checks by directory for the sort of big buckets such as all blog posts, then add page-specific stylesheets under the .Params of that page’s content file. This current issue prevents that. Oh, and yes, I did test that I am successfully entering the if statement when on the blog.

Thanks for any and all help you can provide!

2

What’s the value of .Dir?

Also, please note the deprecation warning when using .Dir.

3

The value of .Dir could be “company/blog”, or “company/blog/2021”, and so forth, since the blog posts are organized into subfolders by year, and this SCSS file includes the index pages under simply “company/blog” as well.

I tried replacing .Dir with a check on the entire page path, and all tests resulted the same. I also tried $.Dir to avoid context issues; once again, same test results.

4

If I understand correctly, this works:

{{ if true }}
    {{ $styles = $styles | append (resources.Get "scss/pages/_blog.scss") }}
{{ end }}

But this does not:

{{ if in .Dir "company/blog/" }}
    {{ $styles = $styles | append (resources.Get "scss/pages/_blog.scss") }}
{{ end }}

If that’s the case:

  1. Verify the value of .Dir

    {{ if in .Dir "company/blog/" }}
  <p>Yes, it's true.</p>
  {{ $styles = $styles | append (resources.Get "scss/pages/_blog.scss") }}
{{ else }}
  <p>No, it's false.</p>
{{ end }}

  2. Post a link to your repository so we can investigate further.