HUGO

How can I inject baseUrl to sass file?

Hi there,
I’m just wondering if there is an easy way to inject to baseUrl variable in the config into a sass variable.
For staging, production and dev enviroments I have different public paths I would like to use.
Ideally it would be great if I could do this by an npm script.
Just wondering if anyone has any ideas?
Many thanks in advance.

This is outside the scope of Hugo and we are unable to help you with this.

If you are using Hugo to build your SASS files, you can ExecuteAsTemplate: Creating a resource from template | Hugo

If on linux you can make a simple bash script containing something like:

sed -i "1i $a" $filename  ##inject a line to the top of the file
sed -i "/^\/\/ local fonts:/a $a" $filename  ## inject a line below a string

where $a is your text to inject

Then call this script from npm.
Just a couple of ideas, you could also do a substitute command.

Then call the script from npm.

You can create different config files for each environment and override baseUrl and other parameters. All you need to do is create the following directories and files:

config
  /_default/config.{yaml,toml,json}
  /dev/config.{yaml,toml,json}
  /staging/config.{yaml,toml,json}

The _default folder can be considered the production config.

EDIT: I have made a short bash script for myself to make it more convenient to push to different environments. You can modify and take the parts you need if you like! ~rsolvang/pu.sh-hugo - sourcehut git

EDIT2: You can take a look at an example from one of my projects here: ~rsolvang/hetlankheet-website: config/ - sourcehut git

EDIT3: Also check out the official documentation: Configure Hugo | Hugo