Error Hugo variable inside Sass

support
1

Hi all I’m using bulma and trying to add some hugo variable inside the sass modul, in this case is theme primary color

my env Windows10 using go version go1.11 windows/amd64 and Hugo Static Site Generator v0.50/extended windows/amd64 BuildDate: unknown

config.toml

[params]
  theme_color = "#EC1164"

───sass
    ├───base
    ├───components
    ├───elements
    ├───grid
    ├───layout
    └───utilities
           └─── initial-variable.sass #Some Hugo variable here

trying add new color theme inside initial-variable.sass

$pink:         {{ .Site.Params.theme_color }}

the output error

e[?25lBuilding sites … e[1;31mERRORe[0m 2018/11/07 15:14:21 error: failed to transform resource: SCSS processing failed: file "E:/YUDY/WEB PROJECT/TIAVI/sites/newdev/assets/assets/css/sass/utilities/initial-variables.sass", line 25, col 7: Invalid CSS after "$pink:": expected 1 selector or at-rule, was "{{ .Site.Params.the"
e[KTotal in 44 ms
Error: Error building site: logged 1 error(s)

the repo https://github.com/yudyananda/justanotherdev

any help would be greatly appreciated

2

You need to read this:

1 Like
3

Good explanations here: https://blog.fullstackdigital.com/how-to-use-hugo-template-variables-in-scss-files-in-2018-b8a834accce

and here: https://regisphilibert.com/blog/2018/07/hugo-pipes-and-asset-processing-pipeline/

1 Like
4

thank you guys execute as template is working now after i move hugo variabe from sass/initial-variable.sass to bulma.sass

@charset "utf-8"

$pink:  {{ .Param "theme_color" }}

/*! bulma.io v0.7.2 | MIT License | github.com/jgthms/bulma */
@import "sass/utilities/_all"
@import "sass/base/_all"
@import "sass/elements/_all"
@import "sass/components/_all"
@import "sass/grid/_all"
@import "sass/layout/_all"

but i’m still curious why the variable failed if I put inside the module?

1 Like