Inject variables into sass/scss stylesheet file, like js.Build defines function

like js.Build defines

see JavaScript Building | Hugo

{{ $defines := dict "process.env.NODE_ENV" `"development"` }}
{{ $built := resources.Get "script.js" | js.Build dict "defines" $defines }}

i think toCSS can allow injects variables to sass

{{ $defines := dict "theme-mode" `"auto"` }}
{{ $built := resources.Get "script.scss" | toCSS dict "defines" $defines }}

add variable definitons to the scss headers

e.g:

$theme: "auto";
// ... original content ...

I find the params option in js.Build more useful for passing in config etc.

As to your question, this is currently not possible. To pass data from templates to SCSS, the main.scss entry needs to be a template itself and built with ExecuteAsTemplate. I agree that this isn’t great, and we need to improve that.

scss use assets files, not good

need copy some files to static folder

i want built-in a resources.* api in sass functions

.example {
   background-image: resources.get("example.png");
}

I have a long list of things I want for Christmas, too. I doubt I get most of it. What you as for is not something you can expect anytime soon, if ever.

With the suggested approach above you can easily do:

.example {
   background-image: $example_image;
}

Which would also be more idomatic Sass (if that’s even a thing).

2 Likes

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