Overriding theme styles

I am using the hugo-whisper theme, which is great.

It defines a lot of styles, which it keeps in assets/scss/style.scss.
Under assets/scss there is also a bunch of directories
with styles, and style.scss @imports them with relative paths.

I wanted to override styles in pages/_home.scss, so I stupidly
copied _home.scss to my main project’s assets/scss/pages
directory and voila! It seems to work.

This is great, but I am not finding any documentation for this
feature, which I imagine is implemented in Hugo by
setting up include paths for sass.

Should I expect this to work? Is there currently documentation for it?

Thanks for any clarifications, explanations.

Yep - this is the expected behaviour. If you’re using a theme in the theme directory, you can override layouts, CSS etc. by putting them in a directory with the same name outside of the theme folder.

Now, doing this for assets may not be documented, but it’s the same principle as for templates.

3 Likes