What is the best way to deal with Sass CSS source maps?

I am trying to figure out a way to deal with CSS source maps that point back to my theme’s Sass SCSS files. I am thinking of two ways. The first is if I have my Sass folder in my theme’s static directory, the Sass folder gets copied to the generated site in /public and then I can use source maps. I am guessing this may not be ideal though so I am wondering if it would be better to somehow generate a symlink on build that points back to the actual theme directory one level above /public? Is this even possible within the Hugo build process or to trigger a script somehow? I am curious how others are doing this. I searched around a bit but did not find much. For the record, I am using grunt for all my Sass and watch tasks.

I don’t use source maps nor SCSS.

But I use LESS and Gulp, and I have my LESS (source files) outside of /static.

Something like this:


Then Gulp does it’s magic, with Less and JS Minify etc =>


I guess source maps is a result of some Grunt task, and, according to my world view, would end up in static.

An older question but still relevant, and top google result for me when searching. This is the solution I came up with:

node-sass call in package.json (I have my hugo site in site/ relative to package.json):
"css:build": "node-sass --output-style compressed --source-map true -o site/themes/hugo_pbd/static/css/ site/themes/hugo_pbd/static-src/sass/"

This builds files in my theme/static-src/sass into my theme/static/css, and uses source-map with the default pathing.

I then navigated into my [hugo site root]/static folder and created this symlink:

ln -s ../themes/hugo_pbd/static-src/ .

(on Windows a similar command can be called using mklink /J)

In my browser, after running hugo server I can now reach the source maps it looks for in http://localhost:1313/static-src/sass/styles.scss