ExecuteAsTemplate is not resolving SCSS/SASS imports

support
1

I just updated my site to use the Hugo Pipeline. It all worked great, so I also wanted to build some more customization in it. The theme is using Materialize CSS, so I thought it would be great to have a variable primary color.

So here’s what I did. In my params I have a color set:

[params]
    color = "indigo"

This is what I use to produce the css:

{{ $style := resources.Get "sass/style.scss" | resources.ExecuteAsTemplate "main.scss" . | toCSS }}
{{ $sheet := $style | minify | fingerprint }}
<link type="text/css" rel="stylesheet" href="{{ $sheet.RelPermalink }}" integrity="{{ $sheet.Data.Integrity }}" media="screen,projection"/>

The materialize scss then imports from the variables files located at components/_variables.scss:

// Variables;
@import "components/variables";

In the file called _variables.scss the colors I have then defined like that:

// 1. Colors
// ==========================================================================

$primary-color: color("{{ .Param "color" }}", "base") !default;
$primary-color-light: lighten($primary-color, 15%) !default;
$primary-color-dark: darken($primary-color, 15%) !default;

$secondary-color: color("{{ .Param "color" }}", "darken-4") !default;
$success-color: color("green", "base") !default;
$error-color: color("red", "base") !default;
$link-color: color("light-blue", "darken-1") !default;

I then get the following error when building the site:

Building sites … WARNING: Unknown `{{ .Params  color  }}` - `base` in $colors.
     on line 409 of themes/material-blog/assets/sass/components/_color.scss, in function `color`
     from line 38 of themes/material-blog/assets/sass/components/_variables.scss
     from line 7 of themes/material-blog/assets/sass/materialize.scss
     from line 1 of stdin

ERROR 2018/08/17 16:52:55 error: failed to transform resource: SCSS processing failed: file "/home/oli/Documents/Web-Stuff/Web/oli.fyi/themes/material-blog/assets/sass/components/_variables.scss", line 39, col 23: argument `$color` of `lighten($color, $amount)` must be a color 
Total in 543 ms
Error: Error building site: logged 1 error(s)

What am I doing wrong? Do I need to specify the specific file which is to be executed?

Thanks for helping.

3

I don’t think using resources.ExectuteAsTemplate on main.scss will execute as template the files imported by the main.scss. Not the last time I checked.

2 Likes
4

So is there a way to execute it first and then import it later?

5

You would have to individually .Get and .ExecuteAsTemplate the sass files concerned. Then, depending on how may other files are added into the mix and their position as imports (before or after it) .Concat them into onesass file and eventually run .ToCSS on that file.

May be tedious.

I’d recommend opening a feature thread titled Allow .ExectuteAsTemplate to be recursive and see if it is something that is desired by many and safe to implement. Would be an interesting discussion to start.

6

I would not be too optimistic about that. ExecuteAsTemplate knows nothing about what the output is going to be used for. It cannot resolve SCSS imports. Any include mechanism needs to be in template domain, e.g. partial or similar.

7

My current workaround:

  • Put all template calls as sass variables in a separate scss file.
  • Use these sass variables in scss files imported in your main scss file.
  • Execute the separate file as a template and concatenate it with your main scss file.

For me ExecuteAsTemplate is very handy as it allows to minify and fingerprint resources in css properties.

8

Okay I also found a workaround. In the first file (the one that is actually executed) I set a Sass variable from the parameter and then use that variable in the imported file. It works really well.