Local theme development, CSS not updating

Themes
1

Hi all, I’m an experienced FE dev, but a total noob to Ghost. In the documentation, it says

“All edits made to Ghost theme files will automatically reload. If you add any new files to your theme during development, you’ll need to restart Ghost to see the changes take effect.”

- See How To Install Ghost Locally - Ghost Developer Docs

I can see that this is true for the template files, however CSS changes are not updated. I’ve been through the tutorials, and they mention running gulp zip but that seems to be aimed at deploying a theme to a production site, rather than local development.

There’s no mention in the docs of gulp (beyond the theme zipping tutorial)

Locally, I’ve got something like this, which is a copy of the source theme

/content
    /themes
        /my-theme
            /assets
                /built
                    screen.css
                    screen.css.map
                    source.js
                    source.js.map
                /css
                    screen.css
                /js
                    source.js
                /fonts
                /images
            /partials
            ...

I’m using the ‘source’ theme as a basis for a new theme as I learn, which seems to have a build step that takes the assets/css/screen.css and output the build step to assets/built/screen.css - I guess it’s not mandatory - but it might help to know how it’s done?

There’s a yarn.lock file - but no mention of yarn in the docs (again, assume this is optional)

Does anyone have any suggestions?

2

OK - so the short answer (I’ve found) is that the Ghost server itself doesn’t do any pre-processing of your css (and I assume js?) it’s on a theme-by-theme basis. The ‘source’ theme happens to use yarn and gulp, but this is not a prerequisite.

You want to use Sass? Go ahead, Ghost doesn’t care. Same for any other build step or even hand-crafted. Bring your own.

The important thing is that whatever you do, the finished files should appear in the assets folder at the top of your theme. This is where Ghost expects them to be, in order to use the {{asset “asset-path”}} feature - see asset - Ghost Developer Docs

3

You can put them anywhere in assets (and just specify the path to it). Ghost doesn’t have a specific location it’s expecting - likely your default.hbs specifies whether to look for index.css vs screen.css vs something else.