Scss attached to templates and shortcodes in layouts folder

I have my own scss templating system and would like to have scss presentation code in the same folder with the html partial or shortcode. This saves me from navigating deep trees or having to enforce a strict file-naming regimen to easily find a collection of files that contribute to a design pattern. It would make the maintenance of a pattern library in a hugo theme a ‘breeze’. It’s already hard to keep inheritance in mind when rationalising a pattern for various views. This would make experimentation and debugging infinitely easier as I don’t have to keep an intricate directory structure in mind but instead only focus on the pattern and the inheritance.

Currently planning to hack it with soft and hard links but I’m worried it might confuse git or create some unintended side effects. Any thoughts on this?

Since you want your SCSS files to reside next to your Hugo templates you can try making the assetDir share the same directory as the layoutDir.



Seems like an interesting solution. Any chance this hack will mess up things?

It is not quite a hack as this is possible through a project’s configuration.

In the past I have combined the assetDir with the staticDir with no problems whatsoever.
Haven’t tried combining it with the layoutDir but there shouldn’t be a problem.

1 Like

It might slow down the creation of your site or reloads if you run the watcher because all files in that folder will be handled once as layout file and once as asset file.

You should be OK if you mount in the right direction. I’ll leave that question open as a pre-Christmas riddle.