Overriding Theme SCSS


What is the proper way to override a theme’s SCSS? I’m using the Tale theme and I’m looking to override the size definition for the post title. Specifically this line. Could you point me to where I should redefine this? I’m looking to reduce the title size from 4 to 3 rem. I’m a complete SCSS/CSS novice so I’m making this up as I go. :wink:



You can override any file from your theme by putting a copy of it into your root folder. For instance /themes/themename/layouts/filename.html becomes /layouts/filename.html. In that copy you can change anything and Hugo will use it to override the theme file.

In your case it would be /assets/scss/tale/_post.scss as copy where you can change things.

1 Like

but you have to redo it after theme updates.
Look at _default/basof.html, where the theme css comes in.
Add your own css after it to overwrite the theme settings.

Perfect. When I initially tried this last night, it did not work. I took a slightly different approach in modifying the SCSS file and it now works. Thank you!

Thankfully you don’t have to overwrite the theme SCSS file. That would break the pattern of isolating the changes from the base theme.

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.