Change data file theme.json and rebuild SCSS variables

1

I have Hugo pipes setup, I am reading values from config.yaml and using them in style.scss - everything works. For example

// style.scss
$bgColor: {{ .Site.Params.bgColor }};
body {
	background-color: $bgColor;
}

While running hugo server if I change params.bgColor value in the config.yaml I see the background color change immediately. The SCSS is recompiled. This is the result I want.

But I would like to move all my theme values to data/theme.json (Why? This is to make editing the theme values more intuitive in CMS, it allows me to seperate and highlight the theme config as it’s own area/page for editors)

When I move the values to theme.json, update a value (say the bgColor) the server reloads but the background color does not change in the browser. Only saving the SCSS file explicitly or re-running the server will update it.

Seems to me like editing data or content files does not recompile the SCSS, while config.yaml is a special case which does.

Does anyone know a way to use data/theme.json but still get the immediate reload/update of the SCSS variables?

1 Like
2

Did you ever figure this out? I’m trying to have a SCSS file for variables populated from a data file too but can’t figure it out.