How to add a custom css and js file with the new theme (hugo modules)

[saul-sl]

Hi,
At the beginning of the year I created a blog using toha theme. Back then, I placed the theme files in a theme folder (ref) and some custom css and js files inside the static/css and static/js folders (ref-1 and ref-2). Basically, they require to add the files on the mentioned location and edit the config.yaml file,

custom_css : css/style.css
custom_js : js/custom.js

However, with the new version of toha theme (currently trying commit: 2c32a26d220702b31dd52631bbfa8e9ab961ac19), if I include those lines I get an error like the following

render: failed to render pages: render of "page" failed: �[1;36m"/home/saul/.cache/hugo_cache/modules/filecache/modules/pkg/mod/github.com/hugo-toha/toha/v4@v4.0.0-20231031082454-cd2546d4e8ea/layouts/_default/baseof.html:47:7"�[0m: execute of template failed at <partial "scripts.html" .>: error calling partial: �[1;36m"/home/saul/.cache/hugo_cache/modules/filecache/modules/pkg/mod/github.com/hugo-toha/toha/v4@v4.0.0-20231031082454-cd2546d4e8ea/layouts/partials/scripts.html:1:3"�[0m: execute of template failed at <partial "helpers/script-bundle.html">: �[1;36m"/home/saul/.cache/hugo_cache/modules/filecache/modules/pkg/mod/github.com/hugo-toha/toha/v4@v4.0.0-20231031082454-cd2546d4e8ea/layouts/partials/helpers/script-bundle.html:1:16"�[0m: execute of template failed at <partial "helpers/get-esbuild-options.html">: �[1;36m"/home/saul/.cache/hugo_cache/modules/filecache/modules/pkg/mod/github.com/hugo-toha/toha/v4@v4.0.0-20231031082454-cd2546d4e8ea/layouts/partials/helpers/get-esbuild-options.html:161:36"�[0m: execute of template failed at <.services>: can’t evaluate field services in type string

So, how can I include a custom css/js files with this new version, thanks

P.S. On a related matter, I noticed that with the new version there is no layout folder anymore. Where do custom shortcodes should be placed?

[cosmin-aron]

I had the same issue with custom CSS since migrating to V4. Unfortunately this has not been documented yet, but you can take a look at the toha repo to see how it works. Essentially you need to create an override.scss file in your assets folder like this:

├── assets
    ├── styles
        ├── override.scss

Hope this solves at least part of your problem. For me the old custom CSS did not produce any errors but had no effect either (because it was in the static folder). So I think in your case the custom js causes the errors.

[hossainemruz]

Thank you @cosmin-aron. I will write a doc for it soon. I am tracking the progress in this issue: #846

[hossainemruz]

Added CSS customization guide here:
https://toha-guides.netlify.app/posts/customizing/customize-css/