How to efficiently deal with rebuild / cache for theme tweaks?

Themes
1

Hello,

I’m doing some tweaks to the wonderful Casper theme. Overall, it’s been very easy but unfortunately I’ve started experiencing some strange issues.

I created a new file called /casper/asset/css/custom.css in the hopes of avoiding an override in the future. I then added the in my default.hbs:

<link rel="stylesheet" type="text/css" href="{{asset "built/custom.css"}}" />

then I uploaded the whole folder and restarted ghost. That worked fine the first few times, but now it’s not, strangely. The custom.css is still loading, but it’s not the latest version that I’m uploading.

I’ve disabled caching on CloudFlare, restarted ghost, did a ‘ghost buster’, but still no update. Any ideas on an optimal procedure for tweaking a theme please? I am on Windows if it makes any difference.

Thank you

2

I ended up putting the styling into Settings > Code injection > Site Header. But I feel gross doing that.

I understand that it may be required to use some combination of yarn, etc. But this seems a bit nuts to me as the list of dependencies (nodejs, .NET, chocolatey, etc etc on Windows) is so large… just to update a few CSS settings?

I’m guessing there’s a better way, right?

3

Hey @BGD, sorry for the delayed response on this topic. I can understand your gripes with using yarn to build the theme, however there is very good reasoning for this. The key point is performance. Our themes use gulp to combine all the CSS into a single compressed file and the JavaScript into one compressed file. This ensure that the site will load quickly and not get blocked by large assets files.

You should be able to use yarn on Windows? Adding CSS to code injection is ok, but I get why you’d prefer to add it a CSS file.

Let us know if you need assistance with this, it might be a good learning experience and help you to make more modifications on your site in future! :art: